根結(jié)點(diǎn)設(shè)置 display:flex
行內(nèi)元素設(shè)置 display:inline-flex
注意退疫，設(shè)為Flex布局以后嫩实，子元素的float澈蝙、clear和vertical-align屬性將失效醇疼。
子結(jié)點(diǎn)設(shè)置項(xiàng):容器屬性
- flex-direction:row | row-reverse | column | column-reverse;
row（默認(rèn)值）：主軸為水平方向漩蟆，起點(diǎn)在左端。
row-reverse：主軸為水平方向鉴扫，起點(diǎn)在右端。
column：主軸為垂直方向刁赦，起點(diǎn)在上沿。
column-reverse：主軸為垂直方向闻镶，起點(diǎn)在下沿甚脉。
- flex-wrap:nowrap | wrap | wrap-reverse;
nowrap（默認(rèn)）：不換行。
wrap：換行铆农，第一行在上方牺氨。
wrap-reverse：換行，第一行在下方墩剖。
- flex-flow:<flex-direction> || <flex-wrap>;}
- justify-content:flex-start | flex-end | center | space-between | space-around;
flex-start（默認(rèn)值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊猴凹，項(xiàng)目之間的間隔都相等。
space-around：每個項(xiàng)目兩側(cè)的間隔相等岭皂。所以郊霎，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
- align-items:flex-start | flex-end | center | baseline | stretch;
flex-start：交叉軸的起點(diǎn)對齊爷绘。
flex-end：交叉軸的終點(diǎn)對齊书劝。
center：交叉軸的中點(diǎn)對齊。
baseline: 項(xiàng)目的第一行文字的基線對齊土至。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto购对，將占滿整個容器的高度。
- align-content:flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：與交叉軸的起點(diǎn)對齊陶因。
flex-end：與交叉軸的終點(diǎn)對齊骡苞。
center：與交叉軸的中點(diǎn)對齊。
space-between：與交叉軸兩端對齊楷扬，軸線之間的間隔平均分布解幽。
space-around：每根軸線兩側(cè)的間隔都相等。所以烘苹，軸線之間的間隔比軸線與邊框的間隔大一倍躲株。
stretch（默認(rèn)值）：軸線占滿整個交叉軸。
結(jié)點(diǎn)內(nèi)項(xiàng)目屬性
- 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ù)這個屬性褒墨，計(jì)算主軸是否有多余空間炫刷。它的默認(rèn)值為auto，即項(xiàng)目的本來大小郁妈。
- flex浑玛，屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto噩咪。后兩個屬性可選顾彰。
- align-self，屬性允許單個項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式胃碾，可覆蓋align-items屬性拘央。默認(rèn)值為auto，表示繼承父元素的align-items屬性书在，如果沒有父元素灰伟，則等同于stretch。
