想必大家經(jīng)常都用到Grid 柵格系統(tǒng)來(lái)實(shí)現(xiàn)分欄布局严望，比如BootStrap這種常用的前端UI庫(kù)中，分欄布局是最常見(jiàn)的功能郊尝。假如不想用BootStrap這類(lèi)整套解決方案的話(huà)翰意，也可以自己實(shí)現(xiàn)，正巧最近在實(shí)現(xiàn)這塊麸锉，所以隨手記一下钠绍。
基于flex的分欄布局
在面對(duì)現(xiàn)代瀏覽器的時(shí)候，利用display: flex 是一個(gè)很好的解決方案花沉。為何要用flexible box 布局柳爽，因?yàn)楝F(xiàn)在主流的瀏覽器基本都已經(jīng)支持這個(gè)CSS 屬性（除了IE9 及以下的瀏覽器），并且可以實(shí)現(xiàn)靈活的布局調(diào)整碱屁。
<div class="wrapper">
<div class="tile-1-1">
One Grid
</div>
</div>
<div class="wrapper offsetL" >
<div class="tile-1-2">
Two Grids
</div>
<div class="tile-1-2">
Two Grids<br>
Two Grids<br>
</div>
</div>
.wrapper {
display: flex; /* flex布局默認(rèn)情況下子元素的高度會(huì)填充滿(mǎn)父元素 */
margin-top: 10px;
}
[class*='tile-'] {
padding: 10px;
box-sizing: border-box;
background: lightgrey;
border: 1px solid red;
}
.tile-1-1 {
width:100%;
}
.tile-1-2 {
width:50%;
margin-right: 10px;
}
.tile-1-2:last-child {
margin-right: 0;
}
從上圖可以看出磷脯，雖然第二排的兩個(gè)元素內(nèi)容不一樣多，但是高度依然一致地填滿(mǎn)了父元素娩脾，這一點(diǎn)對(duì)于帶背景色的Grid布局很方便赵誓。而且想要實(shí)現(xiàn)內(nèi)容居中也很方便，只需要設(shè)定父元素的align-items和justify-content 兩個(gè)屬性為center 即可柿赊。
基于Table 的分欄布局
flex布局最大的問(wèn)題就是不支持IE9俩功，那么為了瀏覽器版本兼容可以用table標(biāo)簽來(lái)定義分欄或者設(shè)定塊級(jí)元素的display屬性為 table，table-row碰声，table-cell等來(lái)模擬table 標(biāo)簽的布局效果诡蜓。一般來(lái)說(shuō)，將想要并列布局的子元素設(shè)為table-cell奥邮，父元素設(shè)定為table 就可以實(shí)現(xiàn)
.wrapper {
width: 100%;
display: table;
border-collapse: separate;
border-spacing: 12px 6px; /* 對(duì)父元素設(shè)置水平和垂直方向的spacing 來(lái)設(shè)定table-cell邊界之間的空隙
*/
}
.offsetL {
margin-left: -12px; /*通過(guò)設(shè)定負(fù) margin 把整個(gè)布局貼齊左邊万牺，因?yàn)閎order-spacing造成了空隙*/
}
.tile-1-2 {
display: table-cell;
width: 50%;
padding: 10px; /* 子元素邊界和內(nèi)容間的空隙 */
// box-sizing: border-box;
background: lightgrey;
border: 1px solid red;
}
.tile-1-1 {
width: 100%;
border: 1px solid red;
box-sizing: border-box;
padding: 10px;
background: lightgrey;
}
以上知識(shí)點(diǎn)雖然很簡(jiǎn)單罗珍。。但真是 用的時(shí)候方恨少脚粟。flex 布局其實(shí)總共也就12個(gè)屬性覆旱，具體可以參考 阮一峰的博客，很生動(dòng)詳細(xì)核无。
