三欄布局那些事兒

中間寬度自適應，兩邊寬度固定的三欄布局，是前端頁面開發中極為常見**布局方式。博主認為，一名合格的前端工程師總是會將之熟記於心。

以下是博主總結的五種三欄布局的常用方法，與大家分享。

浮動布局是一種極易理解，也是初學者首先想到的布局方式。僅借用css的float屬性即可輕鬆實現。

html**

leftdiv>
rightdiv>
maindiv>

css**

.left .right .main

注意html**中三欄的先後順序

浮動布局的優點是簡單，但也有不少缺點：

主要內容main在文件後側，所以直到最後才能渲染主要內容。

left和right其實是浮動到了main上面，也就是說，當主欄高度大於側欄高度時（這種情況極為常見），main下面的部分內容會和頁面同寬。不多說，下面一張圖勝過千言萬語。

僅兩個側欄使用絕對定位，脫離文件流，始終在頁面的兩邊。然後，為了避免主欄和側欄內容重疊，給主欄設定外邊距，其數值等於側欄寬度。

html**

class="main">main
class="right">right
class="left">left

css**

.main .left .right

用絕對定位布局思路簡單清晰，但有乙個明顯的缺點，就是如果中間欄有最小寬度限制，當瀏覽器縮小至一定程度時，會出現層疊現象。如下圖

最為經典的聖杯布局，其思路主要是借用浮動分別將左欄和右欄浮動至主欄的兩邊；然後用外層容器的內邊距將主欄兩邊「推」向中間一定寬度，給左欄和右欄騰出空間；最後借助相對定位將左欄和右欄定位至合適位置即可。

話不多說，先上**：

html**

class="container">
class="main">main
class="left">left
class="right">right

css**

.container .main .left .right

注意，main（也就是主欄）在最前面，兩個側欄尾隨其後，當然左欄和右欄誰在前誰在後都是可以的。這樣布局的好處是：主欄在文件的前面，所以重要的東西會優先渲染。

雙飛翼布局是對聖杯布局的優化，以增加乙個div為代價換取去掉了相對布局。

「雙飛翼」，顧名思義，是在main外圍增加乙個div（.main-outer），然後給.main-outer設定左右內邊距（或者給main設定外邊距，效果相同），像兩個翅膀。兩側欄上浮後剛好位於.main-outer的內邊距處，因此內邊距的值需等於側欄的寬度.

html**

class="container">
class="main-outer">
class="main">main
class="left">left
class="right">right

css**

.main-outer .main .left .right

主欄內容同樣在文件的開頭部分，優先渲染。雙飛翼布局不需使用相對定位，相對來說更易理解。

是時候拿出終極**了，flex布局。萬能的flex啊，賜我以能量吧！

html**

class="container">
class="left">left
class="main">main
class="right">right

css**

.container .main .left .right

上面**有乙個缺陷，就是在html**中，left，main，right的相對位置不能改變，這就導致了main中的主要內容不能被優先渲染。那怎麼辦呢？(≧∀≦)ゞ

萬能的flex當然有辦法咯！

給.mian.left.right三個類中新增如下**：

.left .main .right

搞定！

***以上五種方法各有優缺點，根據實際情況挑選適合專案的即可，大的專案的盡量使用main內容可優先渲染的。