CSS 佈局實例系列（三）如何實現一個左右寬度固定，中間自適應的三列布局——也聊聊雙飛翼

今天聊聊一個經典的佈局實例：

實現一個三列布局，其中左側和右側的部分寬度固定，中間部分寬度隨瀏覽器寬度的變化而自適應變化

可能不少朋友已經笑了，這玩意兒經過雙飛翼佈局就能輕鬆實現。不過，還請容我在雙飛翼以外，按部就班地介紹一下咱們能夠如何實現一個三列布局。

1. 首先，使用浮動佈局來實現一下

See the Pen float-three-column by xal821792703 (@honoka) on CodePen.

1. 左側元素與右側元素優先渲染，分別向左和向右浮動
2. 中間元素在文檔流的最後渲染，並將 width 設爲 100%，則會自動插入到左右兩列元素的中間，隨後設置 margin 左右邊距分別爲左右兩列的寬度，將中間元素調整到正確的位置。

這是一種比較便利的實現方式，無需額外的元素輔助定位，同時兼容性也比較優秀。但有一個缺點就是該佈局方式只能實現左右兩列寬度固定，中間自適應這一種三列布局，靈活性不強。

2. 其實，也能夠試試利用 BFC

See the Pen bfc-three-columns by xal821792703 (@honoka) on CodePen.

昨天的《CSS 佈局實例系列（二）如何經過 CSS 實現一個左邊固定寬度、右邊自適應的兩列布局》已經談到了利用 BFC 原理實現多列布局的方法。BFC 元素不會與浮動元素疊加，天然也能夠利用 BFC 原理完成這個實例。

1. 一樣的左右兩列元素優先渲染，並分別左右浮動。
2. 接下來將中間元素設置 overflow: hidden; 成爲 BFC 元素塊，不與兩側浮動元素疊加，則天然可以插入本身的位置啦。

3. 接下來就嘗試一下大名鼎鼎的雙飛翼佈局吧

See the Pen grid-three-columns by xal821792703 (@honoka) on CodePen.

雙飛翼是由淘寶玉伯等前端大牛提出的一種多列布局方法，主要利用了浮動、負邊距、相對定位三個佈局屬性，使三列布局就像小鳥同樣，擁有中間的身體和兩側的翅膀。

接下來就簡單介紹一下雙飛翼的實現過程：

1. 假設咱們如今須要一個如實例說明同樣的三列布局，寫出以下 div 結構：

   <div class="grid">
       <div id="div-middle-02"><span>div-middle</span></div>
       <div id="div-left-02"><span>div-left</span></div>
       <div id="div-right-02"><span>div-right</span></div>
   </div>
   

2. 首先咱們將中間元素放在文檔流最前面優先渲染，而後使其向左浮動，並設置 width 爲 100%：

   #div-middle-02 {
       float: left;
       background-color: #fff9ca;
       width: 100%;
       height: 50px;
   }

   中間元素直接佔滿全列，造成小鳥的身體。

3. 接下來咱們開始爲小鳥加上雙翼，將左右兩列元素均設爲左浮動，而後經過調整負邊距將其定位在各自的位置上：

   #div-middle-02 {
       float: left;
       background-color: #fff9ca;
       width: 100%;
       height: 50px;
   }
   #div-left-02 {
       float: left;
       background-color: red;
       width: 150px;
       margin-left: -100%;
       height: 50px;
   
   }
   
   #div-right-02 {
       float: left;
       background-color: yellow;
       width: 200px;
       margin-left: -200px;
       height: 50px;
   }

   看起來，雙翼安裝成功啦。

4. 這樣三列布局就大功告成了？No，no，no，仔細看看上面的效果圖，能夠發現 div-middle 的字塊消失了。這是由於經過負邊距調整浮動元素位置時，會產生層疊的效果，上面的佈局其實只是左右兩列元素分別定位在本身的位置上並覆蓋中間元素的那部分而已，中間元素的定位並未成功。中間元素要怎樣定位在本身的位置上呢？小鳥的身體不是還缺乏骨架嘛，那麼咱們在小鳥體內加上骨架吧：

   <div id="div-middle-02">
           <div id="middle-wrap-02"><span>div-middle</span></div>
   </div>

   在中間元素中再增長一層包裹，經過這層骨架咱們就能夠方便地控制小鳥身體的位置啦，方法就是調整骨架的左右邊距，使其分別等於左右兩列的寬度：

   #div-middle-02 {
       float: left;
       background-color: #fff9ca;
       width: 100%;
       height: 50px;
   }
   
   #middle-wrap-02 {
       margin: 0 200px 0 150px;
   }
   
   #div-left-02 {
       float: left;
       background-color: red;
       width: 150px;
       margin-left: -100%;
       height: 50px;
   
   }
   
   #div-right-02 {
       float: left;
       background-color: yellow;
       width: 200px;
       margin-left: -200px;
       height: 50px;
   }

   好啦，一個左右定寬，中間自適應的三列布局以雙飛翼的方式成功完成。

5. 總結整個過程，就是先放好身體，再加上翅膀，而後讓身體包裹一層骨架，經過骨架將身體定位到正確的位置。這就是雙飛翼佈局的徹底體嗎？固然不是，接下來咱們要請出大殺器相對佈局啦，就像小鳥能夠經過各類不一樣的姿式飛翔通常，經過 position: relative; 雙飛翼能夠實現任意的三列或雙列布局。本實例加上相對定位，便成爲了這樣的徹底體：

   #div-middle-02 {
       float: left;
       background-color: #fff9ca;
       width: 100%;
       height: 50px;
   }
   
   #middle-wrap-02 {
       margin: 0 200px 0 150px;
   }
   
   #div-left-02 {
       float: left;
       position: relative;
       background-color: red;
       width: 150px;
       margin-left: -100%;
       height: 50px;
   
   }
   
   #div-right-02 {
       float: left;
       position: relative;
       background-color: yellow;
       width: 200px;
       margin-left: -200px;
       height: 50px;
   }

6. 雙飛翼可以兼容到 IE6，其能夠實現的各類佈局在此便不做展開了，有興趣能夠參考玉伯分享的 DEMO

4. 跟上潮流，試試 flex

See the Pen flex-three-columns by xal821792703 (@honoka) on CodePen.

看完了強大的雙飛翼佈局，是否是已經心急火燎地想親手試試啦。別急，客官，再聽我嘮嘮 CSS3 的新佈局 flex 唄。先讓我說明一下上面的 DEMO 中是怎樣實現本次實例的：

1. 設計一個彈性容器包裹需定位的三個元素，而後將該彈性容器的排列屬性設爲水平排列（flex-flow: row）
2. 如今三個元素已是三列布局了，再將三列元素分別設定一下寬度就好了，左右元素設定爲定寬，自適應的中間元素設定爲 100%。

   .flex {
       display: flex;
       flex-flow: row;
   }
   
   #div-left-03 {
       background-color: red;
       width: 150px;
       height: 50px;
   }
   
   #div-middle-03 {
       background-color: #fff9ca;
       width: 100%;
       height: 50px;
   }
   
   #div-right-03 {
       background-color: yellow;
       width: 200px;
       height: 50px;
   }

   效果以下圖：

3. 搞定收工！大哥你瞪着我是怎麼回事兒？~ 什麼？效果不對？個人代碼怎麼可能不對？！~ 哎呦，別打我，我立刻檢查（哭）好吧，寬度不對，左右兩側的寬度均不符合設定的定值。什麼狀況呢？原來在 flex 佈局中不能將被定位的元素寬度或高度設定爲 100%，這樣會影響其餘定值大小的元素。那麼該如何設置中間元素的寬度呢，flex: 1; 便可，能夠試一下 DEMO 中去掉註釋與不去掉的區別。
4. 最後簡單介紹一下 flex：flex 是 CSS3 的一種彈性容器佈局，經過 flex，幾行簡單的 CSS 語句即可以實現各類佈局（對！我就是 flex NC粉~被拍飛~）。那麼 flex 有什麼缺點呢？對，就是兼容性！
5. 因此在使用 flex 的時候還請注意是否兼容當前瀏覽器，是否須要 -webkit- 標籤。flex 的具體語法和各種實例由於篇(lan)幅(de)過(xie)多的緣由，也不作過多介紹了，能夠參考阮一峯老師的博文：

Flex 佈局教程：語法篇

Flex 佈局教程：實例篇

---

最後感謝你們的閱讀，歡迎前往個人 repo 查看源代碼整理，有任何問題也請盡情向我吐槽。