上一篇介紹了flex彈性盒子的語法，本篇用flex來實際佈局一下。例如我們以前會用inline-block或float配合%百分比來實現自適應的三列等高佈局。但margin / padding計算起來比較複雜，加加減減維護起來很麻煩。用flex彈性盒模型就簡單多了。

首先弄出原始的HTML結構，左右側邊欄定寬220px

* { margin: 0; padding: 0; }
#header, #footer { width: 100%; }
#left, #right { width: 220px; }

<div id="header">header</div>
<div id="page">
    <div id="main">main</div>
    <div id="left">left</div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>
 

現在將內容容器（#page）設成flex彈性盒模型：#page { display: flex; }

中間main就是個普通的div，因此寬度好像沒有自適應，很簡單設#main { flex: auto; }即可。因為兩個側邊欄沒有設flex，因此剩餘的寬度將被main獨享

main的位置不對，調整位置非常簡單，設定#main { … order: 1; }即可。當然別忘了同步給right設#right { … order: 2; }。left不設預設為0。

你可能會疑惑，直接在DOM按left->main->right順序排列不就行了，為何排列成main->left->right？確實調整DOM順序也能達到同樣效果，但將main越置前，對SEO搜尋越友好。這其實並無標準答案，如果你覺得left的內容同樣重要，那left->main->right的DOM順序也是沒問題的。

現在只剩最後一步，將footer置底並拉昇page部分。先將html和body的height設成100%，為全屏做準備。由於body裡包含了header，page，footer，因此為body設定flex彈性盒模型，同時設定flex-direction: column;讓3個子元素垂直排列body { … display: flex; flex-direction: column; }

最後將page拉伸就簡單了，思路和上面main一樣，只要給page設定flex:auto;，因為header和footer沒有設flex，因此剩餘的高度將被page獨享。

* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    display: flex;
    flex-direction: column;
}
#header, #footer { width: 100%; }
#page {
    display: flex;
    flex:auto;
}
#left, #right { width: 220px; }
#right { order: 2; }
#main {
    flex: auto;
    order: 1;
}
 

總結一下自適應三列等高佈局的思路，body應用垂直的flex模型，讓頁頭，頁面，頁尾垂直排列，其中只有頁面部分有flex:auto;將自適應高度。頁面部分應用flex模型，內容，左側欄，右側欄將水平排列，其中只有內容部分有flex:auto;將自適應寬度。如果為了SEO優化，在DOM中將內容部分放在左右側邊欄上面的話，通過order調整順序。

用flex彈性盒子可以輕鬆實現等比例佈局：

.Grid { display: flex; }
.Grid-cell { flex: 1; }

<div class="Grid">
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
  <div class="Grid-cell">…</div>
</div>

也可以實現部分固定比例，剩餘部分自適應佈局：

評論區佈局：

程式碼頁面上都有，極其簡單，可以自行參考。

總結

flex用於佈局真的非常方便，原先用inline-block，float寫的一堆既醜且難維護的程式碼，用flex可以很優雅地實現，什麼垂直居中都是浮雲。唯一需要的只是時間，等那些舊式瀏覽器都死透了，彈性盒子的春天就來了。