flex佈局總結

flex佈局總結

以下6屬性設置在容器上：

1. flex-direction		決定主軸方向
2. flex-warp			決定一排放不下，如何換行
3. flex-flaw			1和2兩屬性的合併寫法
4. justify-content		定義項目在主軸上的對齊方式  
5. align-items			定義項目在交叉軸的對齊方式
6. align-content		定義了多根軸的對齊方式。如果有一根，則不起作用

1.1	flex-direction:  | row(自左向右。小數在左邊，默認值)
					 | row-reverse(自右向左。小數在右邊) 
					 | column(自上到下。小數在上邊) 
					 | column-reverse(自下到上。 小數在下邊);
							   
2.1	flex-warp:  | nowrap(不換行。默認值) 
				| warp(換行) 
				| warp-reverse(換行。第一行在下方);
						 
3.1	flex-flaw: row nowarp; (1和2屬性的合併寫法，自左向右，不換行)

4.1	justify--content:  | flex-start(左對齊。默認值)
					   | flex-end(右對齊) 
					   | center(居中) 
					   | space-between(分配元素之間。兩端對齊，項目之間間隔相等)
					   | space-around(分配元素周圍。每個項目兩側的間隔相等)
					   
5.1  align-items:  | flex-start(交叉軸起點對齊) 
				   | flex-end(交叉軸終點對齊) 
				   | center(交叉軸中點對齊) 
				   | baseline(項目的第一行文字的基線對齊) 
				   | stretch(如果項目未設置高度，或者設置爲auto，將佔滿整個容器高度。默認值)
				   
6.1 align-content:  | flex-start(與交叉軸起點對齊)
					| flex-end(與交叉軸終點對齊)
					| center(交叉軸中點對齊)
					| space-between(與交叉軸兩端對齊，軸向之間的間隔平均分佈)
					| space-around(每根軸線兩側的間隔都相等)
					| stretch(軸線佔滿整個交叉軸。默認值)
					

以下6種屬性設置在項目上：

1 order: 值的類型爲：整數。定義項目的排列順序。數值越小，排列越靠前，默認爲0。

2 flex-grow: 值的類型爲：數字。定義項目的放大比例。默認爲0，即如果有剩餘空間也不放大。

3 flex-shrink: 值的類型爲：數字。定義項目得縮小比例。默認爲1，即空間不足，該項目將縮小。

4 flex-basis: 值的類型：auto,或px,rem,em等長度值。定義項目佔據的主軸空間，默認爲auto。

5 flex: 2,3,4三屬性的合併寫法。如：flex: 0 0 auto;

6 align-self: 調整單個項目與其他項目不一樣的對齊方式，默認值爲auto。即繼承父元素的align-items屬性，沒有父元素則爲stretch。
  align-self: | auto(默認值) 
  			  | flex-start(交叉軸起點對齊) 
  			  | flex-end(終點對齊) 
  			  | center(中點對齊) 
  			  | baseline(第一行文字基線對齊) 
  			  | strech(佔滿交叉軸);