Flex彈性布局
傳統(tǒng)解決方案：盒裝模型。
使用：display、position、float等。
缺點(diǎn)：不易實(shí)現(xiàn)垂直居中等特殊需求。
新解決方案：Flex布局。用來(lái)為盒狀模型提供最大的靈活性。
display:flex; display:inline-flex（行內(nèi)元素使用）;
設(shè)為flex后，會(huì)形成flex容器，所有子元素變?yōu)槿萜髦械捻?xiàng)目。有關(guān)容器的所有專有名詞參見(jiàn)參考文章。
容器有6個(gè)屬性可設(shè)置：
- flex-direction
決定主軸方向。
flex-direction:
row（主軸為水平，起點(diǎn)在左）
row-reverse （主軸為水平，起點(diǎn)在右）
column（主軸為垂直，起點(diǎn)在上）
column-reverse（主軸為垂直，起點(diǎn)在下）;
- flex-wrap
元素超過(guò)一行時(shí)，決定如何換行。
flex-wrap:
nowrap（默認(rèn)，不換行）
wrap（換行，第一行在上方）
wrap-reverse（換行，第一行在下方）;
- flex-flow
是flex-direction和flex-wrap的簡(jiǎn)寫形式。
flex-flow: <flex-direction> || <flex-wrap>;
- justify-content
項(xiàng)目在主軸上的對(duì)齊方式。
justify-content:
flex-start（默認(rèn)，左對(duì)齊）
flex-end （右對(duì)齊）
center（居中）
space-between（兩端對(duì)齊，間隔相等，首末無(wú)間隔）
space-around（每個(gè)項(xiàng)目?jī)啥碎g隔相等，首末有間隔）;
- align-items
決定交叉軸的對(duì)齊方式。
align-items:
flex-start（交叉軸起點(diǎn)對(duì)齊，上對(duì)齊）
flex-end（下對(duì)齊）
center （中點(diǎn)對(duì)齊）
baseline （項(xiàng)目的第一行文字的基線對(duì)齊）
stretch（默認(rèn)，如果未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器高度）;
- align-content
決定多根軸線的對(duì)齊方式。
align-content:
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è)置：
- order
項(xiàng)目排列順序。數(shù)值越小，排列越靠前，默認(rèn)值為0.
order: <integer>;
- flex-grow
項(xiàng)目的放大比例，默認(rèn)為0（及時(shí)存在剩余空間，也不放大）。類似antd的<Col span={number}/>，只不過(guò)此處為比值。
flex-grow: <number>;
- flex-shrink
定義項(xiàng)目縮小比例。默認(rèn)為1（空間不足，該項(xiàng)目將縮?。?。設(shè)為0的項(xiàng)目不縮小。
flex-shrink: <number>;
- flex-basis
分配多余空間之前，項(xiàng)目占據(jù)的主軸控件。默認(rèn)為auto。
flex-basis: <length> | auto;
- flex
是flex-grow、flex-shrink、flex-basis的簡(jiǎn)寫。默認(rèn)0 1 auto。
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)目有不一樣的對(duì)齊方式，可覆蓋anlign-items屬性。默認(rèn)為auto，表示集成父元素屬性，如沒(méi)有父元素，等于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
居中
- 利用彈性布局
找到需要設(shè)置對(duì)齊的元素的父元素，為其設(shè)置彈性布局：
display: flex;
justify-content: center; // 水平居中
align-items: center; // 垂直居中
- 垂直居中
CSS3的transform屬性也可以實(shí)現(xiàn)這個(gè)功能，通過(guò)設(shè)置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。
