移動端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，支持負數。
