布局的傳統(tǒng)解決方案锭魔，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性咬荷。它對(duì)于那些特殊布局非常不方便冠句，比如，垂直居中就不容易實(shí)現(xiàn)幸乒。
Flex是Flexible Box的縮寫罕扎，意為"彈性布局"聚唐，用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局腔召。
[css]?view plain?copy
.box1{??
display:?flex;??
}??
.box2{??
display:?inline-flex;??/*行內(nèi)元素也可以使用Flex布局杆查。*/??
}??
.box3{??
display:?-webkit-flex;?/*?Safari?,Webkit內(nèi)核的瀏覽器，必須加上-webkit前綴臀蛛。*/??
display:?flex;??
}??
注意亲桦，設(shè)為Flex布局以后，子元素的float浊仆、clear和vertical-align屬性將失效客峭。
采用Flex布局的元素抡柿，稱為Flex容器（flex container）舔琅，簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員洲劣，稱為Flex項(xiàng)目（flex item）备蚓，簡(jiǎn)稱"項(xiàng)目"。
容器默認(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横缔。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）衫哥。
[css]?view plain?copy
.box?{??
flex-direction:?row?|?row-reverse?|?column?|?column-reverse;??
}??
row（默認(rèn)值）：主軸為水平方向茎刚，起點(diǎn)在左端。
row-reverse：主軸為水平方向撤逢，起點(diǎn)在右端膛锭。
column：主軸為垂直方向，起點(diǎn)在上沿蚊荣。
column-reverse：主軸為垂直方向初狰，起點(diǎn)在下沿。
默認(rèn)情況下互例，項(xiàng)目都排在一條線（又稱"軸線"）上奢入。flex-wrap屬性定義，如果一條軸線排不下媳叨，如何換行腥光。
[css]?view plain?copy
.box{??
flex-wrap:nowrap?|?wrap?|?wrap-reverse;??
}??
（1）nowrap（默認(rèn)）：不換行。
（2）wrap：換行糊秆，第一行在上方武福。
（3）wrap-reverse：換行，第一行在下方痘番。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式捉片，默認(rèn)值為row nowrap。
[css]?view plain?copy
.box?{??
??flex-flow:??||?;??
}??
3.4 justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式夫偶。
[css]?view plain?copy
.box?{??
justify-content:?flex-start?|?flex-end?|?center?|?space-between?|?space-around;??
}??
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊界睁，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等兵拢。所以翻斟，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊
[css]?view plain?copy
.box?{??
align-items:?flex-start?|?flex-end?|center?|?baseline?|?stretch;??
}??
flex-start：交叉軸的起點(diǎn)對(duì)齊说铃。
flex-end：交叉軸的終點(diǎn)對(duì)齊访惜。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊腻扇。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto债热，將占滿整個(gè)容器的高度。
3.6 align-content屬性
align-content屬性定義了多根軸線的對(duì)齊方式幼苛。如果項(xiàng)目只有一根軸線窒篱，該屬性不起作用。
[css]?view plain?copy
.box?{??
align-content:?flex-start?|?flex-end?|?center?|?space-between?|?space-around?|?stretch;??
}??
flex-start：與交叉軸的起點(diǎn)對(duì)齊。
flex-end：與交叉軸的終點(diǎn)對(duì)齊墙杯。
center：與交叉軸的中點(diǎn)對(duì)齊配并。
space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布高镐。
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婶溯。
[css]?view plain?copy
.item?{??
??order:?;??
}??
4.2 flex-grow屬性 flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0偷霉，即如果存在剩余空間迄委，也不放大。
[css]?view plain?copy
.item?{??
flex-grow:?;/*?default?0?*/??
}??
如果所有項(xiàng)目的flex-grow屬性都為1类少，則它們將等分剩余空間（如果有的話）叙身。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1硫狞，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍信轿。
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1残吩，即如果空間不足财忽，該項(xiàng)目將縮小。
[css]?view plain?copy
.item?{??
flex-shrink:?;/*?default?1?*/??
}??
如果所有項(xiàng)目的flex-shrink屬性都為1泣侮，當(dāng)空間不足時(shí)即彪，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0活尊，其他項(xiàng)目都為1隶校，則空間不足時(shí)，前者不縮小蛹锰。
負(fù)值對(duì)該屬性無效深胳。
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）铜犬。瀏覽器根據(jù)這個(gè)屬性舞终，計(jì)算主軸是否有多余空間轻庆。它的默認(rèn)值為auto，即項(xiàng)目的本來大小权埠。
[css]?view plain?copy
.item?{??
flex-basis:??|auto;?/*?default?auto?*/??
}??
它可以設(shè)為跟width或height屬性一樣的值（比如350px）榨了，則項(xiàng)目將占據(jù)固定空間。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫攘蔽，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選呐粘。
[css]?view plain?copy
.item?{??
flex:none?|?[?<'flex-grow'>?<'flex-shrink'>??||?<'flex-basis'>?]??
}??
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)满俗。
建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性作岖，因?yàn)闉g覽器會(huì)推算相關(guān)值唆垃。
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性痘儡。默認(rèn)值為auto辕万，表示繼承父元素的align-items屬性，如果沒有父元素沉删，則等同于stretch渐尿。
[css]?view plain?copy
.item?{??
align-self:auto?|?flex-start?|?flex-end?|?center?|?baseline?|?stretch;??
}??
該屬性可能取6個(gè)值，除了auto矾瑰，其他都與align-items屬性完全一致砖茸。
