Flex彈性佈局，將是未來佈局的首選，幾乎所有的瀏覽器都已支持。
傳統的盒模型display+position+float方案針對一些特殊的佈局較考驗程序員的功力，比如垂直居中（還記得面試官第一個問題就是：騷年，茴字有幾種寫法？垂直居中有幾種方法？）。
1、Flex佈局全屬性介紹
如果一個元素指定了display:flex，我們就說這個元素指定了Flex佈局（彈性佈局），並且稱它爲容器，容器內的子元素成爲item項，後面都這麼稱呼他們。任何元素都能指定爲Flex佈局，行內元素可以通過display:inline-flex來指定。指定了Flex佈局後，容器的所有子元素的float、clear和vertical-align屬性都將失效。
對於下面的html：
<div class="box">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
容器指定了Flex佈局後，總共只有下面6個屬性可搭配使用：
.box {
display: flex;
flex-direction: row（默認） | row-reverse | column | column-reverse;
flex-wrap: nowrap（默認） | wrap | wrap-reverse;
flex-flow: <flex-direction> || <flex-wrap>（僅僅是前面兩個屬性的簡寫形式，可先忽略）;
justify-content: flex-start（默認） | flex-end | center | space-between | space-around | space-evenly;
align-items: flex-start | flex-end | center | baseline | stretch（默認）;
align-content: flex-start | flex-end | center | space-between | space-around | stretch（默認）;
}
flex-direction：定義了主軸的方向。
flex-wrap：如果一條軸線排不下，item項換行的方式。
justify-content：定義了item項在主軸上的對齊方式。
align-items：定義了item項在副軸上的對齊方式。
align-content：定義了多根軸線的對齊方式。如果item項只有一根軸線，該屬性不起作用。
討論6個屬性前，先要了解Flex佈局的隱藏概念主軸和副軸，很簡單，它們表示容器內item項的排列方向。主軸默認爲水平從左到右，副軸默認爲垂直從上到下。沒錯，主軸的方向就是通過flex-direction屬性設置的，Flex佈局沒有設置副軸的屬性，所以，設置主軸爲水平row時，副軸自動變爲垂直column，反之，設置主軸爲垂直column時，副軸自動變爲水平row。
1.1 flex-direction屬性
表示主軸的方向。
.box{
flex-direction：row | row-reverse | column | column-reverse;
}
有4個可選值：
1、row：主軸從左到右。
2、row-reverse：主軸從右到左。
3、column：主軸從上到下。
4、column-reverse：主軸從下到上。
假設容器共有5個item項，效果如下圖，注意：指定了Flex佈局後item項之間是沒有間隔的：
1.2 justify-content屬性
表示item項在主軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
有6個可選值：
1、flex-start：主軸頭對齊。主軸是row則爲左對齊，主軸是column則爲頂部對齊。
2、flex-end：主軸尾對齊。同上。
3、center：居中。
4、space-between： 兩端對齊，item項之間的間隔相等。
5、space-around：每個item項兩側的間隔相等。所以，item項之間的間隔比item項與邊框的間隔大一倍。
6、space-evenly;：等分對齊。item之間的間隔和item與邊框的間隔一致。
假設容器共有5個item項，效果如下：
主軸爲row-reverser和column-reverse兩個就不展示了。
1.3 align-items屬性
表示items項在副軸方向上的對齊方式。剛開始直接上手彈性佈局的時候，快被它搞糊塗了，justify-content是主軸對齊方式，很自然的想到align-content是副軸對齊方式，對仗工整啊，可align-items纔是對齊方式，align-content有這個屬性，卻是別的含義。
.box {
align-items: flex-start | flex-end | center | baseline | stretch（默認值）;
}
有5個可選值：
1、flex-start：副軸頭對齊。副軸是row則爲左對齊，副軸是column則爲頂部對齊。
2、flex-end：副軸尾對齊。同上。
3、center：居中。
4、baseline：以各個 item項的第一行文字的基線對齊。
5、stretch：如果item項未設置高度或設爲auto，將佔滿整個容器的高度。
假設容器共有3個尺寸不一的item項，效果如下：
1.4 flex-wrap和align-content屬性
flex-wrap表示items項在主軸方向上的換行方式。
align-content表示多根軸線時的對齊方式，如果只有一根軸線（不換行）則此屬性無效。
.box {
flex-wrap: nowrap（默認值） | wrap | wrap-reverse;
align-content: flex-start | flex-end | center | space-between | space-around | stretch（默認值）;
}
1、nowrap：不換行，item項總寬度超出容器寬度時，item項會被壓縮。
2、wrap：換行，且第一行在最上面。
3、wrap-reverse：換行，且第一行在最下面。
align-content和align-items可選值的意義相同，只是沒有space-baseline值。
假設容器共有11個尺寸不一的item項，效果如下：
設置換行後11個item項被分成了兩行，因此就有了兩條主軸，align-content就是來設置這兩條主軸的對齊方式，當主軸爲水平方向時效果如下：
