輕輕鬆鬆學CSS:Flex佈局
Flex佈局就是“彈性佈局”，它可以簡便、完整、響應式地實現各種頁面佈局。引入彈性佈局的目的，當頁面需要適應不同的螢幕大小確保元素擁有恰當的佈局方式，對一個容器中的子元素進行排列、對齊和分配空間。
彈性容器（Flex container）通過設定display屬性的值為flex，包含多個彈性子元素(Flex item，很多資料把彈性子元素稱為“專案")
關於彈性佈局的語法，阮一峰老師的部落格（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html"）比較經典，很多其他部落格都是轉載自此。
關於彈性佈局的例項，阮一峰老師的另外一篇部落格（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）
讀者如果對flex佈局語法不熟悉或者想結合例項來理解flex佈局，可以仔細研讀以上兩個部落格。
本文，主要是對典型的頁面佈局再整理一下，以達到使讀者更深入細緻地理解flex佈局的目的
經典的聖盃佈局或雙飛翼佈局，頁面分為頭部（HEADER）、軀幹（.CONTAINER)、尾部(FOOTER)，其中頭部、尾部定高，軀幹高度自適應，軀幹又分為導航（NAV）、主欄（MAIN)、側欄(ASIDE)，其中導航和側欄定寬，主欄的寬度自適應。
以前的傳統程式碼用到了浮動，程式碼稍顯繁瑣，其實可以使用flex佈局，這樣程式碼更簡潔。
典型的頁面佈局效果圖如下：
DOM結構如下：
1 <body> 2 <header>HEADER</header> 3 <div class="container"> 4 <nav>NAV</nav> 5 <main>MAIN</main> 6 <aside>ASIDE</aside> 7 </div> 8 <footer>FOOTER</footer> 9 </body>
以下的CSS程式碼跟flex佈局無關，它能影響背景色、固定高度值、固定寬度值等，讀者瞭解即可，這不是本文的重點。
html{ height: 100%; text-align:center; } body{ margin:0; height:100%; color:red; } header{ height: 120px; background-color: cornflowerblue; } .container{ background-color: #ccc; display: flex; height:calc(100% - 170px); } footer{ height: 50px; background-color: #000; line-height:50px; text-align:center; } nav{ background-color: lightgreen; } main{ background-color:#ccc; } aside{ background-color: orange; }View Code
以下的CSS程式碼跟flex佈局有關
1 .container{ 2 display: flex; 3 flex-direction:row; 4 flex-wrap:nowrap; 5 justify-content:flex-start; 6 align-items:stretch; 7 } 8 9 nav{ 10 flex:0 0 200px; 11 } 12 main{ 13 flex:1; 14 } 15 aside{ 16 flex:0 0 150px; 17 } 18
其中.container是父容器，就是本文所指的“彈性容器(Flex container)”，nav、main、aside是子元素，就是本文所指的“彈性子元素（Flex item)"，或者叫”專案“
彈性容器的屬性
1、display:flex 通過這個屬性值把.container定義為彈性容器，這個屬性是彈性佈局中最根本的屬性，沒有這個屬性（以及屬性值），其它屬性都沒有意義。
2、flex-direction:row 表示主軸沿著水平軸方向，這是預設值。
3、flex-wrap：nowrap 表示不換行，無論子元素多少都在一行顯示。
4、justify-content:flex-start 子元素在主軸上的對齊方式，本例中main元素自適應，填滿剩餘空間，所以justify-content無論取什麼值，對本例來說，效果都是一樣的。
5、align-items:stretch 子元素在交叉軸（和主軸垂直）上的對齊方式，本例中沒有指定nav、main、aside的高度，所以拉伸（stretch）到和父元素（彈性容器）一樣的高度。
子元素（專案）的屬性
nav/aside
flex:0 0 200px/flex:0 0 150px是一種簡寫形式
相當於：
flex-grow:0 主軸上有剩餘空間子元素也不分配
flex-shrink:0 主軸上空間不足子元素也不縮小
flex-basis:200px/150px nav/aside在收縮前的基準值是200px/150px（對於flex-direction：row來說就是寬度）
main
flex:1是快捷鍵，相當於flex:1 1 0%
即：
flex-grow:1
flex-shrink:1
flex-basis:0%（即：0px）
flex：1表示以0px為基準，自動收縮，這個屬性值經常用。
Flex佈局和多媒體查詢結合，使響應式佈局更加簡便
/*中等螢幕*/ @media (max-width:992px){ /*主軸沿水平方向，超出空間後換行*/ .container{flex-direction:row;flex-wrap:wrap;} /*nav、aside各佔一半寬度*/ nav,aside{flex:0 0 50%;height:200px;} /*main獨佔一行*/ main{order:1;flex:0 0 100%;} } /*小螢幕*/ @media (max-width:768px){ .container{ display:flex; /*小螢幕時，因為nav、aside、main都獨佔一行，*/ /*所以主軸設定為沿垂直方向（交叉軸就沿水平方向）*/ flex-direction:column; flex-wrap:nowrap; } nav,aside{ width:100%; /*因為flex-direction:column，所以flex-basis:100px含義就是高度=100px*/ /*固定高度100px*/ flex:0 0 100px; } /*通過order屬性，設定顯示的先後順序*/ nav{order:1;} /*flex：1自適應*/ main{flex:1;order:3;} aside{order:2;} }
中等螢幕效果圖如下：
小螢幕效果圖如下：