css flex布局基礎

1:flex:

讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 (塊級元素)

藍色紅色藍色紅色藍色紅色藍色紅色 #main #main div

效果：

2:flex-basis 專案的長度。合法值：「auto」、「inherit」或乙個後跟「%」、「px」、「em」或任何其他長度單位的數字

#main1 
#main1 div 
#main1 div:nth-of-type(2)

效果：

3:flex-direction 設定

元素內彈性盒元素的方向

flex-direction: row （預設，主軸為水平方向，起點在左端）| row-reverse（主軸為水平方向，起點在右端） | column（主軸為垂直方向，起點在上沿） | column-reverse（主軸為垂直方向，起點在下沿）;

abc
def   #main2 
#main2 div

效果：

4:flex-wrap 讓彈性盒的元素以順序顯示，且在必要的時候進行拆行

預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行

flex-wrap: nowrap（預設，不換行） | wrap（換行，第一行在上方） | wrap-reverse（換行，第一行在下方）;

abc
def   #main3 
#main3 div

效果：

5:flex-grow 讓第幾個元素的寬度成為其他元素的幾倍

#main4 
#main4 div:nth-of-type(1) 
#main4 div:nth-of-type(2) 
#main4 div:nth-of-type(3) 
#main4 div:nth-of-type(4) 
#main4 div:nth-of-type(5)

效果：

6:flex-flow屬性

flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap

flex-flow: ||

7:justify-content屬性

定義了專案在主軸上的對齊方式

justify-content: flex-start（預設值，左對齊） | flex-end（右對齊） | center（居中） | space-between（兩端對齊，專案之間的間隔都相等） | space-around（每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍）

效果：

8:align-items屬性

定義專案在交叉軸上如何對齊

align-items: flex-start （交叉軸的起點對齊）| flex-end（交叉軸的終點對齊） | center （交叉軸的中點對齊）| baseline （專案的第一行文字的基線對齊）| stretch（預設值，如果專案未設定高度或設為auto，將佔滿整個容器的高度）

效果：9:align-content屬性

定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用

效果：