移動端flex佈局

彈性盒佈局語法分為兩部分：

1. 新增在父容器上的語法

（1）display : flex; 設定為彈性盒（父元素新增）

（2）flex-direction: 主軸排列方式

　　row; 預設值，預設為橫向排列。

　　row-reverse; 反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。                  

　　column; 顯示為列。

　　column-reverse; 反轉縱向排列，從下往上排，最後一項在最上面。

（3）flex-wrap: 是否進行換行處理。

　　nowrap; 預設值，不換行處理

　　wrap; 換行處理  （第二行處於中間位置）

　　wrap-reverse; 反向換行

（4）justify-content: 決定了主軸方向上子項的對齊和分佈方式。（主軸對齊方式）

　　flex-start; 預設，頂端對齊。    

　　center; 居中對齊。

　　flex-end; 末端對齊。

　　space-between; 表現為兩端對齊。between是中間的意思，意思是多餘的空白間距只在元素中間區域分配。

　　space-around; 均分對齊，around是環繞的意思，意思是每個flex子項兩側都環繞互不干擾的等寬的空白間距，最終視覺上邊緣兩側的空白只有中間空白寬度一半。

　　space-evenly; evenly是勻稱、平等的意思。也就是視覺上，每個flex子項兩側空白間距完全相等。

（5）align-items : 每一行中的子元素上下對齊方式.（側軸對齊方式）

　　flex-start;（y軸頂部對齊）

　　center;（y軸中間對齊）

　　flex-end;（y軸以底部對齊）   

　　baseline;如果彈性盒元素的行內軸與側軸為同一條，則該值與flex-start等效。其他情況下，該值將參與基線對齊。

（6）align-content : 行與行之間的對齊方式。                         

　　flex-start;（以開始位置為對齊方式）

　　center;（居中對齊）

　　flex-end;（底對齊）   

　　space-between;（兩端對齊）

　　space-around;（均分對齊）

　　注：要兩行即兩行以上 。

2.新增到子容器上的語法    

（1）flex-grow : 一個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。                

　　0; 預設值 , 不去擴充套件

　　1; 去擴充套件 , 會把空白區域全部佔滿

（2）flex-shrink : 一個數字，規定專案將相對於其他靈活的專案進行收縮的量。                

　　正常預設值是1

　　0表示不收縮。           

　　注：當沒有空餘並且值大於1的時候才收縮，並且沒有負值。

（3）flex-basis : 跟flex-shrink/flex-grow很像。

flex-shrink/flex-grow是設定一個比例值，flex-basis是設定一個具體值。

（4）flex:1; 每個子項都加flex:1;則剩餘空間平分。

（5）algin-self: 規定靈活容器內被選中專案的對齊方式。    

　　auto;預設值。元素繼承了父容器的align-items屬性。如果沒有父容器則為“stretch”                

　　flex-start;元素位於容器的開頭。

　　center;元素位於容器的中心。

　　flex-end;元素位於容器的結尾。

　　stretch;元素被拉伸以適應容器。

（6）order：number順序優先順序，數字越大越往後排，預設為0，支援負數。

&n