Flex佈局知識點

flex彈性佈局,

語法

display:-webkit-flex; [指定伸縮容器]
-webkit-flex: none | [flex-grow flex-shrink || flex-basis] | initial | auto

取值： none：在任何狀況下都不會發生伸縮
    
    flex-grow：擴展比率   flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
    
    flex-shrink：收縮比率  flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
    
    flex-basis：伸縮基準值flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小

 

     initial ：在有剩餘空間的狀況下不會有任何變化，可是在必要的狀況下會被收縮

    auto：會根據主軸自動伸縮以佔用全部剩餘空間，很是相似於普通流中的自動外邊距

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0

1.flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向):

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

2.flex-wrap屬性

默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

3 flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

• nowrap
• wrap
• wrap-reverse

4 justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

5 align-items屬性

align-items屬性定義項目在交叉軸上如何對齊。

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

6 align-content屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

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