一打毛、Flex布局是什么司恳？
Flex是Flexible Box的縮寫途乃，意為”彈性布局”，用來為盒狀模型提供最大的靈活性扔傅。
任何一個(gè)容器都可以指定為Flex布局姑蓝。
.box{ display: flex;}
行內(nèi)元素也可以使用Flex布局。
.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）韩容，簡(jiǎn)稱”容器”。它的所有子元素自動(dòng)成為容器成員唐瀑，稱為Flex項(xiàng)目（flex item）群凶，簡(jiǎn)稱”項(xiàng)目”。
三哄辣、容器的屬性
以下6個(gè)屬性設(shè)置在容器上请梢。
flex-direction? ?flex-wrap? ?flex-flow??justify-content? ?align-items? ?align-content
3.1 flex-direction屬性
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）。
row（默認(rèn)值）：主軸為水平方向力穗，起點(diǎn)在左端毅弧。
row-reverse：主軸為水平方向，起點(diǎn)在右端当窗。
column：主軸為垂直方向够坐，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向崖面，起點(diǎn)在下沿元咙。
3.2 flex-wrap屬性
（1）nowrap（默認(rèn)）：不換行。
（2）wrap：換行巫员，第一行在上方庶香。
（3）wrap-reverse：換行，第一行在下方简识。
3.3 flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式脉课，默認(rèn)值為row nowrap。
.box {? flex-flow: <flex-direction> <flex-wrap>;}
3.4 justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式财异。
.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)目與邊框的間隔大一倍拷泽。
space-evenly：每個(gè)項(xiàng)目的間隔相等疫鹊。
3.5 align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊袖瞻。
.box {? align-items: flex-start | flex-end | center | baseline | stretch;}
flex-start：交叉軸的起點(diǎn)對(duì)齊。（y軸對(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)目只有一根軸線捞奕，該屬性不起作用牺堰。
.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è)交叉軸渐溶。
