Flex布局是什么饰躲？
Flex是Flexible Box的縮寫(xiě)牙咏，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性嘹裂。
任何一個(gè)容器都可以指定為Flex布局妄壶。
.box{display: flex; }
行內(nèi)元素也可以使用Flex布局。
.box{display: inline-flex;}
注意：設(shè)為Flex布局以后寄狼，子元素的float丁寄、clear和vertical-align屬性將失效。
基本概念
采用Flex布局的元素泊愧，稱(chēng)為Flex容器（flex container）伊磺，簡(jiǎn)稱(chēng)"容器"。它的所有子元素自動(dòng)成為容器成員拼卵，稱(chēng)為Flex項(xiàng)目（flex item），簡(jiǎn)稱(chēng)"項(xiàng)目"蛮艰。
容器默認(rèn)存在兩跟軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)腋腮。主軸的開(kāi)始位置(與邊框的交叉點(diǎn))叫做main start，結(jié)束位置叫做main end;交叉軸的開(kāi)始位置叫做cross start壤蚜，結(jié)束的位置叫做cross end即寡。
項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size袜刷，占據(jù)的交叉軸空間叫做cross size聪富。
容器屬性
以下六個(gè)屬性設(shè)置在容器上。
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
flex-direction屬性
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）
.box { flex-direction: row | row-reverse | column | column-reverse;}
它可能有4個(gè)值著蟹。
1.row（默認(rèn)值）：主軸為水平方向墩蔓，起點(diǎn)在左端。
2.row-reverse：主軸為水平方向萧豆，起點(diǎn)在右端奸披。
3.column：主軸為垂直方向，起點(diǎn)在上沿涮雷。
4.column-reverse：主軸為垂直方向阵面，起點(diǎn)在下沿。
flex-wrap屬性
默認(rèn)情況下洪鸭，項(xiàng)目都排在一條線(xiàn)（又稱(chēng)“軸線(xiàn)”）上样刷。flex-wrap屬性定義的是如果一條軸線(xiàn)排不下，如何換行览爵。
.box{
flex-wrap:nowrap | wrap | wrap-reverse;
}
它可能取三個(gè)值：
（1）nowrap（默認(rèn)）：不換行置鼻。
(2)wrap:換行，第一行在上方蜓竹。
(3)wrap-reverse換行沃疮，第一行在下方盒让。
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap司蔬。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式邑茄。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個(gè)值，具體對(duì)齊方式與軸的方向有關(guān)俊啼。下面假設(shè)主軸為從左到右肺缕。
1. flex-start(默認(rèn)值)：左對(duì)齊
2. flex-end：右對(duì)齊
3. center：居中
4. space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等
5. space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等授帕。所以同木，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
align-items屬性
align-items屬性定義項(xiàng)目在交叉抽上如何對(duì)齊跛十。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個(gè)值彤路。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下芥映。
flex-start：交叉軸的起點(diǎn)對(duì)齊洲尊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊奈偏。
baseline: 項(xiàng)目的第一行文字的基線(xiàn)對(duì)齊坞嘀。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿(mǎn)整個(gè)容器的高度惊来。
align-content屬性
align-content屬性定義了多根軸線(xiàn)的對(duì)齊方式丽涩。如果項(xiàng)目只有一根軸線(xiàn)，該屬性不起作用裁蚁。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
該屬性可能取6個(gè)值矢渊。
flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊枉证。
center：與交叉軸的中點(diǎn)對(duì)齊昆淡。
space-between：與交叉軸兩端對(duì)齊，軸線(xiàn)之間的間隔平均分布刽严。
space-around：每根軸線(xiàn)兩側(cè)的間隔都相等昂灵。所以，軸線(xiàn)之間的間隔比軸線(xiàn)與邊框的間隔大一倍舞萄。
stretch（默認(rèn)值）：軸線(xiàn)占滿(mǎn)整個(gè)交叉軸眨补。
項(xiàng)目的屬性
order屬性
order屬性定義項(xiàng)目的排序順序。數(shù)值越小倒脓，排列越靠前撑螺，默認(rèn)為0。
.item {
order: <integer>;
}
flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例崎弃，默認(rèn)為0甘晤，即如果存在剩余空間含潘，也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有項(xiàng)目的flex-grow屬性都為1线婚，則它們將等分剩余空間（如果有的話(huà)）遏弱。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1塞弊，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍柠辞。
flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例谴轮，默認(rèn)為1，即如果空間不足柿扣，該項(xiàng)目將縮小予颤。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有項(xiàng)目的flex-shrink屬性都為1第喳，當(dāng)空間不足時(shí)满钟，都將等比例縮小咙崎。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1眯勾，則空間不足時(shí)枣宫，前者不縮小。
負(fù)值對(duì)該屬性無(wú)效咒精。
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前镶柱，項(xiàng)目占據(jù)的主軸空間（main size）旷档。瀏覽器根據(jù)這個(gè)屬性模叙，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto鞋屈，即項(xiàng)目的本來(lái)大小范咨。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間厂庇。
flex屬性
flex屬性flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)渠啊，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選权旷。
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個(gè)快捷值：auto(1 1 auto) 和 none (0 0 auto)替蛉。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性拄氯，因?yàn)闉g覽器會(huì)推算相關(guān)值躲查。
align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性译柏。默認(rèn)值為auto镣煮，表示繼承父元素的align-items屬性，如果沒(méi)有父元素鄙麦，則等同于stretch典唇。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
該屬性可能取6個(gè)值镊折，除了auto，其他都與align-items屬性完全一致介衔。
瀏覽器兼容性
首先定義容器的display屬性：
.box{
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
注意：如果子元素師行內(nèi)元素恨胚，需要使用 display:block 或 display:inline-block 把行內(nèi)子元素變成塊元素，否則老版的不起作用
子元素主軸對(duì)齊方式
.box{
/* 09版 */-webkit-box-pack: center;
/* 12版 */-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
}
這里舊版語(yǔ)法有4個(gè)參數(shù)夜牡，而新版語(yǔ)法有5個(gè)參數(shù)与纽，兼容寫(xiě)法新版語(yǔ)法的 space-around 是不可用的：
.box{
box-pack: start | end | center | justify;
/*主軸對(duì)齊：左對(duì)齊（默認(rèn)） | 右對(duì)齊 | 居中對(duì)齊 | 左右對(duì)齊*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*主軸對(duì)齊方式：左對(duì)齊（默認(rèn)） | 右對(duì)齊 | 居中對(duì)齊 | 兩端對(duì)齊 | 平均分布*/
}
子元素交叉軸對(duì)齊方式
.box{
/* 09版 */ -webkit-box-align: center;
/* 12版 */ -webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
這里的參數(shù)除了寫(xiě)法不同，其實(shí)是功能是一樣的：
.box{
box-align: start | end | center | baseline | stretch;
/*交叉軸對(duì)齊：頂部對(duì)齊（默認(rèn)） | 底部對(duì)齊 | 居中對(duì)齊 | 文本基線(xiàn)對(duì)齊 | 上下對(duì)齊并鋪滿(mǎn)*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉軸對(duì)齊方式：頂部對(duì)齊（默認(rèn)） | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿(mǎn) | 文本基線(xiàn)對(duì)齊*/
}
子元素的顯示方向
子元素的顯示方向可通過(guò)box-direction ＋ box-orient + flex-direction實(shí)現(xiàn)：
橫向排列塘装，默認(rèn)從左到右
.box{
/* 09版 */ -webkit-box-orient: horizontal;
/* 12版 */ -webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
改成從右到左
.box{
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
從上到下
.box{
/* 09版 */ -webkit-box-orient: normal;
/* 12版 */ -webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
下到上
.box{
-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
允許換行
.box{
/* 09版 */ /*-webkit-box-lines: multiple;*/
/* 12版 */ -webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 子元素-平均分欄 */
.item {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */}
是否允許子元素伸縮－box語(yǔ)法中 box-flex 如果不是0就表示該子元素允許伸縮急迂，而flex是分開(kāi)的,flex-grow 是允許放大默認(rèn)不允許），下面的 flex-shrink 是允許縮斜碾取（默認(rèn)允許）僚碎。box-flex 默認(rèn)值為0。
.item{
-webkit-box-flex: 1.0;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
}
.item{
-webkit-box-flex: 1.0;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
子元素的顯示次序
.item{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}
注意：對(duì)于占據(jù)固定大小的元素阴幌，新版可以flex: 0 1 20px勺阐，老版本的兼容辦法是設(shè)置width：20px
