2009年，W3C提出了一種新的方案—-Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
可以設(shè)置的六個(gè)屬性：
（1）flex-direction屬性
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
( 2 ) flex-wrap屬性
默認(rèn)情況下，項(xiàng)目都排在一條線（又稱”軸線”）上.也就是里面的item可以換行顯示。默認(rèn)情況下是排成一長(zhǎng)溜，如果寬度不夠了，就會(huì)等比縮放，擠擠更健康。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
（3）flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。
（4）justify-content屬性（默認(rèn)橫軸）
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
（5）align-items屬性（默認(rèn)豎軸）
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
（6）align-content屬性
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。
其他的具體教程可以學(xué)習(xí)：
（1）https://www.runoob.com/w3cnote/flex-grammar.html
