Flex布局
常見父項的屬性：
●flex-direction :設置主軸的方向
Row 默認值從左到右
row-reverse 從右到左
column 從上到下
column-reverse 從下到上
●justify-content :設置主軸上的子元素排列方式
flex-start 默認值從頭部開始 如果主軸是x軸，則從左到右
flex-end 從尾部開始排列（但元素的順序還是從左到右）
center 在主軸居中對齊(如果主軸是x軸則水平居中)
space- around 平分剩余空間
space – between 先兩邊貼邊再平分剩余空間(重要)
●flex-wrap :設置子元素是否換行
默認情況下,項目都排在一條線(又稱”軸線”) 上。flex-wrap屬性定義 , flex布局中默認是不換行的。
nowrap 默認值，不換行
wrap 換行
●align-content :設置側軸上的子元素的排列方式(多行)
設置子項在側軸.上的排列方式並且只能用於子項出現換行的情況(多行) , 在單行下是沒有效果的。
flex-start 默認值在側軸的頭部開始排列
flex- end 在側軸的尾部開始排列
center 在側軸中間顯示
space-around 子項在側軸平分剩余空間
space- between 子項在側軸先分布在兩頭,再平分剩余空間
stretch 設置子項元素高度平分父元素高度
●align-items :設置側軸上的子元素排列方式(單行)
該屬性是控制子項在側軸(默認是y軸).上的排列方式在子項為單項(單行)的時候使用
flex-start 從上到下
flex- end 從下到上
center 擠在一起居中(垂直居中)
stretch 拉伸(默認值但是子盒子如果給高度就不會生效)
●flex-flow :復合屬性,相當於同時設置了flex-direction和flex-wrap
flex-dicection: column;
flex-wrap: wrap;
它倆的簡寫可以寫成：
flex-flow: column wrap;
常見子項的屬性：
●flex子項目占的份數
flex屬性定義子項目分配剩余空間,用flex來表示占多少份數。
●align-self控制子項自己在側軸的排列方式
align-self屬性允許單個項目有與其他項目不-樣的對齊方式，可覆蓋align-items屬性。
默認值為auto ,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。
span:nth-child(2){
/*設置自己在側軸的排列方式*/
align-self:flex-end;
}
●order屬性定義子項的排列順序(前后順序)
數值越小,排列越靠前,默認為0。（這個是左右的形式）
注意:和z-index不-樣。（index是疊羅漢的形式）
flex屬性flex:1到底是什么？
flex屬性 是 flex-grow、flex-shrink、flex-basis三個屬性的縮寫。
推薦使用此簡寫屬性，而不是單獨寫這三個屬性。
flex-grow：定義項目的的放大比例；
默認為0，即使存在剩余空間，也不會放大；
所有項目的flex-grow為1：等分剩余空間（自動放大占位）；
flex-grow為n的項目，占據的空間（放大的比例）是flex-grow為1的n倍。
flex-shrink：定義項目的縮小比例；
默認為1，即 如果空間不足，該項目將縮小；
所有項目的flex-shrink為1：當空間不足時，縮小的比例相同；
flex-shrink為0：空間不足時，該項目不會縮小；
flex-shrink為n的項目，空間不足時縮小的比例是flex-shrink為1的n倍。
flex-basis： 定義在分配多余空間之前，項目占據的主軸空間（main size），瀏覽器根據此屬性計算主軸是否有多余空間，
默認值為auto，即 項目原本大小；
設置后項目將占據固定空間。
所以flex屬性的默認值為：0 1 auto （不放大會縮小）
flex為none：0 0 auto （不放大也不縮小）
flex為auto：1 1 auto （放大且縮小）
flex為一個非負數字n：該數字為flex-grow的值，
flex：n ；= flex-grow：n；
flex-shrink：1；
flex-basis：0%;
flex為兩個非負數字n1，n2： 分別為flex-grow和flex-shrink的值，
flex：n1 n2；= flex-grow：n1；
flex-shrink：n2；
flex-basis：0%;
flex為一個長度或百分比L：視為flex-basis的值，
flex：L；= flex-grow：1；
flex-shrink：1；
flex-basis：L;
flex為一個非負數字n和一個長度或百分比L：分別為flex-grow和flex-basis的值，
flex：n L；= flex-grow：n；
flex-shrink：1；
flex-basis：L;
可以發現，flex-grow和flex-shrink在flex屬性中不規定值則為1，flex-basis為0%。
flex：1即為flex-grow：1，經常用作自適應布局，將父容器的display：flex，側邊欄大小固定后，將內容區flex：1，內容區則會自動放大占滿剩余空間。