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)叔磷，效果如下：