flex佈局中主要屬性值

flex佈局相關屬性(父元素) 
1.display:
display:flex;表示當前盒子爲flex佈局

2.flex-direction:

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

3.flex-wrap

1. nowrap(默認)：當一條軸線排不下，不換行；
2. wrap(默認)：當一條軸線排不下，換行，第一行在上方；
3. wrap-reverse(默認)：當一條軸線排不下，換行，第一行在下方；

4.flex-flow

//flex-direction與flex-wrap屬性的簡寫,默認值爲row nowrap
flex-flow:'flex-direction' 'flex-wrap'

5.justify-content

1. flex-start //默認值，主軸上從左至右（從上至下）方向排序
2. flex-end //主軸上從右至左（從下至上）方向排序
3. center //子元素所有居中排序
4. space-between //子元素兩端對齊，項目之間的間隔都相等。
5. space-around //每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

6.align-items

1. flex-start//交叉軸的起點對齊
2. flex-end//交叉軸的終點對齊
3. center//交叉軸的中間對齊
4. baseline//首行文字的基線對齊
5. stretch//默認值，若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

7.align-content

1. flex-start：與交叉軸的起點對齊。
2. flex-end：與交叉軸的終點對齊。
3. center：與交叉軸的中點對齊。
4. space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
5. space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
6. stretch（默認值）：軸線佔滿整個交叉軸。

flex佈局相關屬性（子元素） 
1.flex-grow
//lex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大

flex-grow: num //num值默認爲0，能夠爲0以上的數字，能夠 爲小數或整數，若全部子元素的flex-grow值相同，則等比例佔比空間

2.flex-shrink

//flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

flex-shrink: num//num值默認爲1，能夠爲0以上數字，若全部的子元素flex-shrink值相同，則等比例縮小，爲0時不縮小

3.flex-basis

flex-basis: <length> | auto; /* default auto */

//flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

//它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

4.flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

//flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
//該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

//建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

5.order

order:num //默認爲0，能夠爲負數

//表示項目的排列順序，數值越小，排序越前

6.align-self

 align-self: auto | flex-start | flex-end | center | baseline | stretch;
//align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

//該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。