網(wǎng)頁傳統(tǒng)布局：基于盒狀模型衣摩，依賴display屬性，position屬性戈擒，float屬性眶明；對于特殊布局使用很不方便。
2009年筐高，W3C提出了一種新的布局方案：Flex布局搜囱。
Flex布局
Flex是Flexible Box的縮寫“彈性布局”，比盒狀模型更靈活柑土，更好用蜀肘。
任何一個(gè)容器都可以指定為Flex布局
.box｛
display：flex；
｝
行內(nèi)元素也可以使用Flex 布局
行內(nèi)元素：
.box｛
display：inline-flex稽屏；
｝
Webkit內(nèi)核的瀏覽器扮宠，必須加上-webkit前綴
.box｛
display：-webkit-flex；/*Safari
display：flex狐榔；
｝
注意：設(shè)為Flex布局以后涵卵，子元素的float，clear荒叼，vertical-align屬性將失效
基本概念
采用Flex布局的元素，稱為Flex容器（flex container）典鸡，簡稱"容器"被廓。它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目（flex item）萝玷，簡稱"項(xiàng)目"嫁乘。
容器的屬性
以下6個(gè)屬性設(shè)置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）球碉。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4個(gè)值蜓斧。
row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端睁冬。
row-reverse：主軸為水平方向挎春，起點(diǎn)在右端看疙。
column：主軸為垂直方向，起點(diǎn)在上沿直奋。
column-reverse：主軸為垂直方向能庆，起點(diǎn)在下沿。
flex-wrap屬性默認(rèn)情況下脚线，項(xiàng)目都排在一條線（又稱"軸線"）上搁胆。flex-wrap屬性定義，如果一條軸線排不下邮绿，如何換行渠旁。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三個(gè)值。
nowrap（默認(rèn)）：不換行船逮。
wrap：換行顾腊，第一行在上方。
wrap-reverse：換行傻唾，第一行在下方投慈。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap冠骄。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content屬性定義了項(xiàng)目在主軸上的對齊方式伪煤。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個(gè)值，具體對齊方式與軸的方向有關(guān)凛辣。下面假設(shè)主軸為從左到右抱既。
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項(xiàng)目之間的間隔都相等扁誓。
space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等防泵。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍蝗敢。
align-items屬性定義項(xiàng)目在交叉軸上如何對齊捷泞。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個(gè)值。具體的對齊方式與交叉軸的方向有關(guān)寿谴，下面假設(shè)交叉軸從上到下锁右。
flex-start：交叉軸的起點(diǎn)對齊。
flex-end：交叉軸的終點(diǎn)對齊讶泰。
center：交叉軸的中點(diǎn)對齊咏瑟。
baseline: 項(xiàng)目的第一行文字的基線對齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto痪署，將占滿整個(gè)容器的高度码泞。
align-content屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線狼犯，該屬性不起作用余寥。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
該屬性可能取6個(gè)值领铐。
flex-start：與交叉軸的起點(diǎn)對齊。
flex-end：與交叉軸的終點(diǎn)對齊劈狐。
center：與交叉軸的中點(diǎn)對齊罐孝。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布肥缔。
space-around：每根軸線兩側(cè)的間隔都相等莲兢。所以，軸線之間的間隔比軸線與邊框的間隔大一倍续膳。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸改艇。
項(xiàng)目的屬性
以下6個(gè)屬性設(shè)置在項(xiàng)目上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order屬性定義項(xiàng)目的排列順序坟岔。數(shù)值越小谒兄，排列越靠前，默認(rèn)為0社付。
flex-grow屬性定義項(xiàng)目的放大比例承疲，默認(rèn)為0，即如果存在剩余空間鸥咖，也不放大燕鸽。
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1啼辣，即如果空間不足啊研，該項(xiàng)目將縮小。
flex-basis屬性定義了在分配多余空間之前鸥拧，項(xiàng)目占據(jù)的主軸空間（main size）党远。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間富弦。它的默認(rèn)值為auto沟娱，即項(xiàng)目的本來大小。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫腕柜，默認(rèn)值為0 1 auto花沉。后兩個(gè)屬性可選。
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式媳握，可覆蓋align-items屬性。默認(rèn)值為auto磷脯，表示繼承父元素的align-items屬性蛾找，如果沒有父元素，則等同于stretch赵誓。
