需求描述
三欄布局在我們生活中很常見(jiàn)，一般要求的是兩邊寬度固定，中間自適應(yīng)寬度萤厅。
假設(shè)我們有如下html代碼，要求實(shí)現(xiàn)三欄布局靴迫。
<div class="column-container">
<div class="column left">left</div>
<div class="column center">center</div>
<div class="column right">right</div>
</div>
結(jié)果如下：
css-three-columns.png
最簡(jiǎn)單是方式是用 flex 或者 grid惕味。他們被設(shè)計(jì)出來(lái)的目的就是應(yīng)付這類(lèi)場(chǎng)景的。
1. grid 實(shí)現(xiàn)
通過(guò)把最外層設(shè)置為 grid 布局玉锌。再把內(nèi)容劃分為三列,中間列的寬度為auto名挥，如果我們還需要設(shè)置每列的間距，還可以利用column-gap屬性主守。代碼如下：
.column-container {
display: grid;
grid-template-columns: 200px auto 200px;
column-gap: 10px;
}
2. flex 實(shí)現(xiàn)
設(shè)置container為 flex 布局禀倔，左右寬度固定后，中間列加上flex: 1屬性丸逸，代碼如下：
.column-container {
display: flex;
column-gap: 10px;
}
.left,
.right {
width: 200px;
}
.center {
flex: 1;
}
flex 還有個(gè)很有意思的屬性是order,假設(shè) HTML 代碼如下蹋艺，需要把 center 放在中間剃袍。
<div class="column-container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
我們可以通過(guò)設(shè)置order屬性來(lái)對(duì) flex 里面的內(nèi)容進(jìn)行排序黄刚。
.left {
order: 0;
}
.center {
order: 1;
}
.right {
order: 2;
}
3. 傳統(tǒng)的 float 布局
這個(gè)方法我們現(xiàn)在已經(jīng)不推薦了，原因如下：
- 代碼實(shí)現(xiàn)起來(lái)不簡(jiǎn)潔
- 靈活性也比較低,加邊距的時(shí)候麻煩民效。
- 在響應(yīng)式這塊適配比較查憔维。
不過(guò)我們也可以通過(guò)和之前的flex,grid兩種方法進(jìn)行對(duì)比涛救，結(jié)果如下：
css-three-columns-float.png
代碼實(shí)現(xiàn)：
.left {
width: 200px;
float: left;
}
.right {
width: 200px;
float: right;
}
.center {
width: 100%;
}
