Flex彈性布局，將是未來布局的首選，幾乎所有的瀏覽器都已支持。

傳統(tǒng)的盒模型display+position+float方案針對(duì)一些特殊的布局較考驗(yàn)程序員的功力，比如垂直居中（還記得面試官第一個(gè)問題就是：騷年，茴字有幾種寫法？垂直居中有幾種方法？）。

1、Flex布局全屬性介紹

如果一個(gè)元素指定了display:flex，我們就說這個(gè)元素指定了Flex布局（彈性布局），并且稱它為容器，容器內(nèi)的子元素成為item項(xiàng)，后面都這么稱呼他們。任何元素都能指定為Flex布局，行內(nèi)元素可以通過display:inline-flex來指定。指定了Flex布局后，容器的所有子元素的float、clear和vertical-align屬性都將失效。
對(duì)于下面的html：
<div class="box">
????<div class="item1"></div>
????<div class="item2"></div>
????<div class="item3"></div>
</div>
容器指定了Flex布局后，總共只有下面6個(gè)屬性可搭配使用：
.box {
????display: flex;
????flex-direction: row（默認(rèn)） | row-reverse | column | column-reverse;
????flex-wrap: nowrap（默認(rèn)） | wrap | wrap-reverse;
????flex-flow: <flex-direction> || <flex-wrap>（僅僅是前面兩個(gè)屬性的簡(jiǎn)寫形式，可先忽略）;
????justify-content: flex-start（默認(rèn)） | flex-end | center | space-between | space-around | space-evenly;
????align-items: flex-start | flex-end | center | baseline | stretch（默認(rèn)）;
????align-content: flex-start | flex-end | center | space-between | space-around | stretch（默認(rèn)）;
}
flex-direction：定義了主軸的方向。
flex-wrap：如果一條軸線排不下，item項(xiàng)換行的方式。
justify-content：定義了item項(xiàng)在主軸上的對(duì)齊方式。
align-items：定義了item項(xiàng)在副軸上的對(duì)齊方式。
align-content：定義了多根軸線的對(duì)齊方式。如果item項(xiàng)只有一根軸線，該屬性不起作用。
討論6個(gè)屬性前，先要了解Flex布局的隱藏概念主軸和副軸，很簡(jiǎn)單，它們表示容器內(nèi)item項(xiàng)的排列方向。主軸默認(rèn)為水平從左到右，副軸默認(rèn)為垂直從上到下。沒錯(cuò)，主軸的方向就是通過flex-direction屬性設(shè)置的，F(xiàn)lex布局沒有設(shè)置副軸的屬性，所以，設(shè)置主軸為水平row時(shí)，副軸自動(dòng)變?yōu)榇怪?code>column，反之，設(shè)置主軸為垂直column時(shí)，副軸自動(dòng)變?yōu)樗?code>row。

1.1 flex-direction屬性

表示主軸的方向。
.box{
????flex-direction：row | row-reverse | column | column-reverse;
}
有4個(gè)可選值：
1、row：主軸從左到右。
2、row-reverse：主軸從右到左。
3、column：主軸從上到下。
4、column-reverse：主軸從下到上。
假設(shè)容器共有5個(gè)item項(xiàng)，效果如下圖，注意：指定了Flex布局后item項(xiàng)之間是沒有間隔的：

1.2 justify-content屬性

表示item項(xiàng)在主軸上的對(duì)齊方式。
.box {
????justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
有6個(gè)可選值：
1、flex-start：主軸頭對(duì)齊。主軸是row則為左對(duì)齊，主軸是column則為頂部對(duì)齊。
2、flex-end：主軸尾對(duì)齊。同上。
3、center：居中。
4、space-between： 兩端對(duì)齊，item項(xiàng)之間的間隔相等。
5、space-around：每個(gè)item項(xiàng)兩側(cè)的間隔相等。所以，item項(xiàng)之間的間隔比item項(xiàng)與邊框的間隔大一倍。
6、space-evenly;：等分對(duì)齊。item之間的間隔和item與邊框的間隔一致。
假設(shè)容器共有5個(gè)item項(xiàng)，效果如下：

1.3 align-items屬性

表示items項(xiàng)在副軸方向上的對(duì)齊方式。剛開始直接上手彈性布局的時(shí)候，快被它搞糊涂了，justify-content是主軸對(duì)齊方式，很自然的想到align-content是副軸對(duì)齊方式，對(duì)仗工整啊，可align-items才是對(duì)齊方式，align-content有這個(gè)屬性，卻是別的含義。
.box {
????align-items: flex-start | flex-end | center | baseline | stretch（默認(rèn)值）;
}
有5個(gè)可選值：
1、flex-start：副軸頭對(duì)齊。副軸是row則為左對(duì)齊，副軸是column則為頂部對(duì)齊。
2、flex-end：副軸尾對(duì)齊。同上。
3、center：居中。
4、baseline：以各個(gè) item項(xiàng)的第一行文字的基線對(duì)齊。
5、stretch：如果item項(xiàng)未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。
假設(shè)容器共有3個(gè)尺寸不一的item項(xiàng)，效果如下：

1.4 flex-wrap和align-content屬性

flex-wrap表示items項(xiàng)在主軸方向上的換行方式。
align-content表示多根軸線時(shí)的對(duì)齊方式，如果只有一根軸線（不換行）則此屬性無效。
.box {
????flex-wrap: nowrap（默認(rèn)值） | wrap | wrap-reverse;
????align-content: flex-start | flex-end | center | space-between | space-around | stretch（默認(rèn)值）;
}
1、nowrap：不換行，item項(xiàng)總寬度超出容器寬度時(shí)，item項(xiàng)會(huì)被壓縮。
2、wrap：換行，且第一行在最上面。
3、wrap-reverse：換行，且第一行在最下面。
align-content和align-items可選值的意義相同，只是沒有space-baseline值。
假設(shè)容器共有11個(gè)尺寸不一的item項(xiàng)，效果如下：