FlexBox的使用:
1.什么FlexBox布局？
彈性盒子模型（The Flexible Box Module）,又叫Flexbox，意為“彈性布局”，旨在通過彈性的方式來對齊和分布容器中內容的空間，使其能適應不同屏幕，為盒裝模型提供最大的靈活性。
FlexBox布局更多的用到移動端，PC端除了盒子模型布局，也支持FlexBox布局 , FlexBox布局將會是成為未來開發的主流技術，將在移動端體現的最明顯。
2.FlexBox應用場景:
1.FlexBox布局能夠解決的問題
浮動布局
各種機型屏幕的適配
水平和垂直居中
自動分配寬度
......
2.Flex布局的思想
在pc段與移動端的Flex布局的主側軸是相反的,這點需要注意
主軸
**側軸（交叉軸）**
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列，單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。
eg:
3.父容器排列方式的不同，主軸和側軸方向也有所變化
4.PC指定盒子為FlexBox布局結論：主軸的方向? 與? 父容器中的排列方向? 一致
5.FlexBox的常用屬性
1.容器屬性
1.flexDirection
row | row-reverse | column | column-reverse
該屬性：規定了主軸的方向（父容器中的排列方向）。
row：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column(默認值)：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
column-reverse：主軸為垂直方向，起點在下沿。
案例：
將上面的flexDirection的屬性修改成：column后，效果為：
將上面的flexDirection的屬性修改成：row后，效果為：
2.justifyContent
flex-start | flex-end | center | space-between | space-around
規定：子item在主軸方向的對齊方式
flex-start(默認值)：伸縮項目向一行的起始位置靠齊。
flex-end：伸縮項目向一行的結束位置靠齊。
center：伸縮項目向一行的中間位置靠齊。
space-between：兩端對齊，項目之間的間隔都相等。
space-around：伸縮項目會平均地分布在行里，兩端保留一半的空間。
下圖灰色為背景,主軸方向為水平，側軸方向為垂直：
案例：
將上面的justifyContent的屬性修改成：flex-end后，效果為：
將上面的justifyContent的屬性修改成：space-between后，效果為：
3.alignItems
flex-start | flex-end | center | baseline | stretch
規定：子item在側軸方向的對齊方式
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊 。
center：交叉軸的中點對齊。
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
下圖灰色為背景，主軸方向是水平，側軸方向是垂直
將上面的alignItems的屬性修改成：center后，效果為：
將上面的alignItems的屬性修改成：flex-end后，效果為：
4.flexWrap
nowrap | wrap | wrap-reverse
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowrap(默認值)：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。（和wrap相反）
沒設計換行
換行
2.元素屬性
1.flex
flex是?“flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫, 參數一：定義項目的放大比例；參數二：定義了項目的縮小比例；參數三：定義了在分配多余空間之前，項目占據的主軸空間。其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。
flex默認值為“0? 1? auto ”。
案例：
權重分別：1，1，1
權重分別：1，4，1
2.align-self
align-self屬性允許單個item有與其他item不一樣的對齊方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
