Flex彈性布局
傳統(tǒng)解決方案：盒裝模型魂那。
使用：display奇钞、position忽刽、float等鲜侥。
缺點：不易實現(xiàn)垂直居中等特殊需求褂始。
新解決方案：Flex布局。用來為盒狀模型提供最大的靈活性描函。
display:flex; display:inline-flex（行內(nèi)元素使用）;
設(shè)為flex后崎苗，會形成flex容器狐粱，所有子元素變?yōu)槿萜髦械捻椖俊Ｓ嘘P(guān)容器的所有專有名詞參見參考文章胆数。
容器有6個屬性可設(shè)置：
- flex-direction
決定主軸方向肌蜻。
flex-direction:
row（主軸為水平，起點在左）
row-reverse （主軸為水平必尼，起點在右）
column（主軸為垂直蒋搜，起點在上）
column-reverse（主軸為垂直，起點在下）;
- flex-wrap
元素超過一行時判莉，決定如何換行豆挽。
flex-wrap:
nowrap（默認，不換行）
wrap（換行券盅，第一行在上方）
wrap-reverse（換行帮哈，第一行在下方）;
- flex-flow
是flex-direction和flex-wrap的簡寫形式。
flex-flow: <flex-direction> || <flex-wrap>;
- justify-content
項目在主軸上的對齊方式渗饮。
justify-content:
flex-start（默認但汞，左對齊）
flex-end （右對齊）
center（居中）
space-between（兩端對齊，間隔相等互站，首末無間隔）
space-around（每個項目兩端間隔相等，首末有間隔）;
- align-items
決定交叉軸的對齊方式僵缺。
align-items:
flex-start（交叉軸起點對齊胡桃，上對齊）
flex-end（下對齊）
center （中點對齊）
baseline （項目的第一行文字的基線對齊）
stretch（默認，如果未設(shè)置高度或設(shè)為auto磕潮，將占滿整個容器高度）;
- align-content
決定多根軸線的對齊方式翠胰。
align-content:
flex-start （交叉軸起點對齊）
flex-end （交叉軸終點對齊）
center （交叉軸中點對齊）
space-between （交叉軸兩端對齊，軸線之間間隔平均分布）
space-around （每根軸線兩側(cè)間隔都相等）
stretch（默認自脯，軸線占滿整個交叉軸）;
項目6個屬性可以設(shè)置：
- order
項目排列順序之景。數(shù)值越小，排列越靠前膏潮，默認值為0.
order: <integer>;
- flex-grow
項目的放大比例锻狗，默認為0（及時存在剩余空間，也不放大）焕参。類似antd的<Col span={number}/>轻纪，只不過此處為比值。
flex-grow: <number>;
- flex-shrink
定義項目縮小比例叠纷。默認為1（空間不足刻帚，該項目將縮小）涩嚣。設(shè)為0的項目不縮小崇众。
flex-shrink: <number>;
- flex-basis
分配多余空間之前掂僵，項目占據(jù)的主軸控件。默認為auto顷歌。
flex-basis: <length> | auto;
- flex
是flex-grow看峻、flex-shrink、flex-basis的簡寫衙吩。默認0 1 auto互妓。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優(yōu)先使用這個屬性坤塞，而不是單獨寫三個分離的屬性冯勉，因為瀏覽器會推算相關(guān)值。
- align-self
允許單個項目有不一樣的對齊方式摹芙，可覆蓋anlign-items屬性灼狰。默認為auto，表示集成父元素屬性浮禾，如沒有父元素交胚，等于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
居中
- 利用彈性布局
找到需要設(shè)置對齊的元素的父元素盈电，為其設(shè)置彈性布局：
display: flex;
justify-content: center; // 水平居中
align-items: center; // 垂直居中
- 垂直居中
CSS3的transform屬性也可以實現(xiàn)這個功能蝴簇，通過設(shè)置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)匆帚。
