註意事項

1.設為Flex布局之後，子元素的float，clear和vertical-align屬性都講失效
2.采用Flex布局的元素，稱為Flex容器（Flex container），所有的子元素成為容器成員，稱為Flex項目（Flex item）
3.容器默認存在兩根軸：水平的主軸和垂直的交叉軸
4.主軸的開始位置叫做main start，結束位置叫做main end
5.交叉軸的開始位置叫做cross start，結束位置叫做cross end
6.單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size

容器的屬性

1.flex-direction:決定主軸的方向（即子項目的排列方向）

row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。

2.flex-wrap:換行

nowrap(默認)：不換行
wrap:換行，第一行在上方
wrap-reverse:換行，第一行在下方

3.flex-flow:是flex-direction和flex-wrap屬性的簡寫

4.justify-content：定義了項目在主軸上的對齊方式

flex-start（默認值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
 

5.align-items：定義項目在交叉軸上如何對齊

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

6.align-content：定義多根軸線的對齊方式（一根軸線不生效）

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
 

子項目屬性

1.order：定義項目的排列順序。數值越小，排列越靠前，默認為0

5.flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。後兩個屬性可選。

.item {
  flex: none | [ <‘flex-grow‘> <‘flex-shrink‘>? || <‘flex-basis‘> ]
}
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

6.align-self屬性：定義單個項目的對齊方式，可以覆蓋align-items屬性

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

針對父級容器的設置
display:flex

flex-wrap:是否換行
flex-direction:子項的排列方向
justify-content:子項在水平方向的排列
align-content:多行子項在水平方向的排列
align-items:統一設置單行子項在水平方向的排列

針對子項的設置
flex:設置子項的比例關系
flex:1
order:設置子項在兄弟間的排列順序
align-self:單獨設置每個子項在垂直方向的排列

flex彈性盒子