一锋恬、Flex簡介
Flex布局是彈性布局滔岳，用來為盒狀模型提供最大的靈活性杠娱。
當(dāng)把容器設(shè)為Flex布局后，子元素的float谱煤、clear和vertical-align屬性將失效摊求。
二、基本概念
采用Flex布局的元素趴俘，稱為Flex容器睹簇，簡稱”容器”奏赘。其子元素自動成為容器成員寥闪，稱為Flex項目太惠，簡稱”項目”。
容器默認(rèn)存在兩根軸疲憋，一個默認(rèn)是水平方向的主軸凿渊，一個垂直方向的交叉軸。
主軸和交叉軸的起點位置分別叫做main start和cross start缚柳，主軸和交叉軸的結(jié)束位置分別叫做main end和cross end埃脏。主軸方向確定了交叉軸方向就確定了。
三秋忙、Flex屬性
容器(box)屬性
1.flex-direction屬性 - 確定主軸的方向（項目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
·row（默認(rèn)值）：主軸為水平方向彩掐，起點在左端。
·row-reverse：主軸為水平方向灰追，起點在右端堵幽。
(row、row-reverse弹澎，交叉軸為垂直方向朴下，起點在上沿)
·column：主軸為垂直方向，起點在上沿苦蒿。
·column-reverse：主軸為垂直方向殴胧，起點在下沿。
(column佩迟、column-reverse团滥，交叉軸為水平方向，起點在左端)
2.flex-wrap屬性 - 決定項目一條軸線排不下报强，如何換行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
·nowrap（默認(rèn)）：不換行灸姊。
·wrap：換行，第一行在上方躺涝。
·wrap-reverse：換行厨钻，第一行在下方。
3.flex-flow屬性
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式坚嗜，默認(rèn)值為row nowrap夯膀。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
4.justify-content屬性 - 項目在主軸上的對齊方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
具體對齊方式與主軸的方向有關(guān)。假設(shè)主軸為水平方向從左到右（row）時：
·flex-start（默認(rèn)值）：左對齊
·flex-end：右對齊
·center： 居中
·space-between：左右兩端對齊苍蔬，項目之間的間隔都相等诱建。
·space-around：每個項目兩側(cè)的間隔相等。所以碟绑，項目之間的間隔比項目與邊框的間隔大一倍俺猿。
假設(shè)主軸為垂直方向從上到下(column)時：
·flex-start（默認(rèn)值）：上對齊
·flex-end：下對齊
·center： 居中
·space-between：上下兩端對齊茎匠，項目之間的間隔都相等。
·space-around：每個項目上下兩側(cè)的間隔相等押袍。所以诵冒，項目之間的間隔比項目與邊框的間隔大一倍。
5.align-items屬性 - 定義項目在交叉軸上如何對齊,具體的對齊方式與交叉軸的方向有關(guān)谊惭。
(主軸是水平方向汽馋，交叉軸為垂直方向；主軸是垂直方向交叉軸為水平方向)
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
假設(shè)交叉軸從上到下：
·flex-start：交叉軸的起點對齊圈盔。
·flex-end：交叉軸的終點對齊豹芯。
·center：交叉軸的中點對齊。
·baseline: 項目的第一行文字的基線對齊驱敲。
·stretch（默認(rèn)值）：如果項目未設(shè)置高度或設(shè)為auto铁蹈，將占滿整個容器的高度。
6.align-content - 定義了多根軸線的對齊方式
該屬性必須同flex-wrap:wrap/wrap-reverse一起使用众眨。如果項目flex-wrap:nowrap握牧，該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
·flex-start：與交叉軸的起點對齊围辙。
·flex-end：與交叉軸的終點對齊我碟。
·center：與交叉軸的中點對齊。
·space-between：與交叉軸兩端對齊姚建，軸線之間的間隔平均分布矫俺。
·space-around：每根軸線兩側(cè)的間隔都相等。所以掸冤，軸線之間的間隔比軸線與邊框的間隔大一倍厘托。
·stretch（默認(rèn)值）：軸線占滿整個交叉軸。
項目(item)屬性
1.order屬性 - 定義項目的排列順序稿湿。數(shù)值越小铅匹，排列越靠前，默認(rèn)為0饺藤。
.item {
order: <integer>;
}
2.flex-grow屬性 - 定義項目的放大比例包斑，默認(rèn)為0，即如果存在剩余空間涕俗，也不放大罗丰。
.item {
flex-grow: <number>; /* default 0 */
}
數(shù)值越大，其所分的剩余空間越大再姑，倍數(shù)關(guān)系萌抵。
3.flex-shrink屬性 - 定義了項目的縮小比例，默認(rèn)為1，即如果空間不足绍填，該項目將縮小霎桅。
.item {
flex-shrink: <number>; /* default 1 */
}
當(dāng)flex-shrink屬性為0時，項目不縮小讨永。負(fù)值對該屬性無效滔驶。
4.flex-basis屬性 - 在分配多余空間之前，項目占據(jù)的主軸空間（main size）住闯。瀏覽器根據(jù)這個屬性瓜浸，計算主軸是否有多余空間澳淑。它的默認(rèn)值為auto比原，即項目的本來大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
5.flex屬性 - 是flex-grow, flex-shrink 和 flex-basis的簡寫杠巡，默認(rèn)值為0 1 auto量窘。后兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)氢拥。
6 align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式蚌铜，可覆蓋align-items屬性。默認(rèn)值為auto嫩海，表示繼承父元素的align-items屬性冬殃，如果沒有父元素，則等同于stretch叁怪。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
四审葬、兼容性
容器：
display: -webkit-flex;/* Chrome 21+ */
display: flex;/* Opera 12.1, Firefox 22+ */
display:-webkit-box;/*Safari, iOS, Android browser, older WebKitbrowsers. */
display: -ms-flexbox;/* IE 10 */
display: -moz-box;/* Firefox (buggy) */
flex-direction屬性：
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;
-webkit-flex-direction:column;
flex-wrap屬性:
-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;
flex-flow屬性:
-webkit-flex-flow:row wrap;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
-moz-flex-flow:row wrap;
box-orient:horizontal;
box-lines:multiple;
flex-flow:row wrap;
justify-content屬性:
-webkit-justify-content:center|flex-start|flex-end;
justify-content:center|flex-start|flex-end;
-moz-box-pack:center|start|end;
-webkit--moz-box-pack:center|start|end;
box-pack:center|start|end;
align-items屬性:
align-items:center|flex-start|flex-end;
-webkit-align-items:center|flex-start|flex-end;
box-align:center|start|end;
-moz-box-align:center|start|end;
-webkit-box-align:center|start|end;
order屬性:
box-order:number;
-webkit-box-order:number;
-moz-box-order:number;
order:number;/* ie11, Spec - Opera 12.1, Firefox 20+ */
-webkit-order:number;/* Chrome */
flex屬性:
box-flex: 1;
-webkit-box-flex:number;/* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex:number;/* OLD - Firefox 19- */
flex:number;/* ie11, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex:number;/* Chrome */
