你們等了很久的彈性佈局（flex），還不快來~！
傳統的佈局方案中，我們基本都是在基於盒模型，依賴dispaly（顯示）、position（定位）以及float（浮動）等屬性來操作。但是這些操作需要用到一些特殊的佈局上就會顯得不方便了，比如，我們最常見的模組垂直居中的實現就不是很容易。而正是針對這些不易實現的佈局，我們今天就跟大家分享一種簡單好用的佈局方式——彈性佈局(flex)，一起來學習吧~~~
flex佈局的由來
flex是flexible box的縮寫，意思是“彈性佈局”，用來為操作盒模型提供豐富的靈活性。早在2009年，W3C就已經提出這種簡單、完整、響應式實現各種頁面的佈局。目前來說，大部分的瀏覽器也已經得到了相容，大家可以安全的去使用了。瀏覽器相容如下：
什麼是flex佈局
flex佈局定義
flex佈局能更加輕鬆地實現複雜網頁佈局，並且可以在螢幕和瀏覽器視窗大小發生變化時進行調整以保持元素的相對位置和大小（即響應式操作）。
採用flex佈局的元素，稱為flex容器（flex container），簡稱“容器”。頁面中的任何一個容器（標籤）都可以指定為flex佈局，例如：.box {display: flex;}。容器中所有的子元素自動成為容器成員，稱為flex專案（flex item），簡稱“專案”。
注意：設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。
flex佈局表現形式
flex容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿著主軸排列，即水平排列，效果圖如下：
flex的容器屬性
常用的容器屬性有flex-direction（排列）、flex-wrap（換行）、flex-flow(屬性合寫)等。
flex-direction屬性
flex-direction屬性決定主軸的方向（即專案的排列方向）。
書寫形式：flex-direction: row | row-reverse | column | column-reverse; 主要屬性值介紹如下：
- row（預設值）：主軸為水平方向，起點在左端；
- row-reverse：主軸為水平方向，起點在右端；
- column：主軸為垂直方向，起點在上沿；
- column-reverse：主軸為垂直方向，起點在下沿。
程式碼案例如下：屬性值使用與效果展示：
.wrap {
display: flex;
flex-direction: row/row-reverse/column/column-reverse;
width: 750px;
height: 100px;
margin: 100px auto;
}
.wrap p {
border: 1px solid red;
}
<div class="wrap">
<p>flex-direction屬性決定主軸的方向</p>
<p>flex-direction屬性決定主軸的方向</p>
<p>flex-direction屬性決定主軸的方向</p>
</div>程式碼案例效果展示：
flex-wrap屬性
flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
書寫形式：flex-wrap: nowrap | wrap | wrap-reverse; 主要屬性值介紹如下：
- nowrap（預設）：不換行；
- wrap：換行，第一行在上方；
- wrap-reverse：換行，第一行在下方。
程式碼案例如下：屬性值使用與效果展示：
.wrap {
display: flex;
flex-wrap: wrap/wrap-reverse;
width: 300px;
height: 60px;
margin: 30px auto;
}
.wrap p {
border: 1px solid red;
}
<div class="wrap">
<p>flex-wrap決定了新行堆疊的方向第一行</p>
<p>flex-wrap決定了新行堆疊的方向第二行</p>
<p>flex-wrap決定了新行堆疊的方向第三行</p>
</div>程式碼案例效果展示：
flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。屬性的介紹參看上面的兩個屬性，此處不再贅述，僅說明下屬性的寫法。
預設值為row(水平左方向) nowrap(不換行)
書寫如下：flex-flow: row nowrap;
flex的專案屬性
常用的專案元素屬性有flex-grow(放大比例)、flex-shrink(縮小比例)、flex-basis(主軸空間)、flex(屬性合寫)等。下面先來介紹這幾個屬性的概念以及寫法，最後再合起來展示一個案例。
flex-grow屬性
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。
書寫形式：flex-grow: <值>;
如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink屬性
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
書寫形式：flex-shrink: <值>;
如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小，此處書寫負值無效。
flex-basis屬性
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間大小（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
書寫形式：flex-basis: <值>
此屬性的值可以設為跟width屬性一樣的值，px、%都支援。
flex屬性
flex屬性是flex-grow、flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
該屬性的在介紹如下表：
接下來就通過一個案例來複習並鞏固彈性佈局中所有的屬性的使用吧，下面的這個案例是一個網站的基本結構，實現了在瀏覽器大小變化下的響應式佈局，這也是當前很多網站的一個實現方式，一起來寫吧~
html, body {
font-family: "Arial";
font-size: 20px;
background: #EDEDED;
}
#flexContainer {
display: flex;
}
.wrap header {
background: #707070;
min-height: 100px;
margin: 3px;
padding: 3px;
}
.wrap nav {
background: #C9BFBF;
flex: 1 1 15%;
min-width: 150px;
margin: 3px;
padding: 3px;
}
.wrap aside {
background: #C9C9C9;
flex: 1 1 15%;
min-width: 150px;
padding: 3px;
margin: 3px;
}
#content {
min-height: 800px;
background: #ABABAB;
flex: 2 1 70%;
margin: 3px;
padding: 3px;
}
.wrap footer {
background: #707070;
min-height: 50px;
margin: 3px;
padding: 3px;
}
@media all and (max-width: 640px) {
#flexContainer {
flex-flow: column wrap;
}
.wrap header {
min-height: 75px;
}
.wrap nav {
min-height: 50px;
order: 1;
}
.wrap aside {
min-height: 50px;
order: 2;
}
#content {
min-height: 725px;
order: 3;
}
.wrap footer {
min-height: 25px;
}
}
<div class="wrap">
<header>header</header>
<section id="flexContainer">
<nav>navigation</nav>
<section id="content">section</section>
<aside>aside</aside>
</section>
<footer>footer</footer>
</div>全屏瀏覽器（1920px）下展示的效果：
瀏覽器的大小拖放到640畫素以下的展示效果如下：
