flex佈局總結

什麼是flex佈局？

• 佈局的傳統解決方案是基於盒狀模型，依賴 display + position + float屬性。它對於一些特殊佈局很是不方便，垂直居中就不容易實現。
• Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性。 任何一個容器l均可以指定爲Flex佈局，就連行內元素均可以使用 Flex 佈局。 .a{display: inline-flex;}
• flex佈局的四大概念：容器，項目，主軸，交叉軸。容器咱們能夠看做父元素，項目看做子元素，主軸和交叉軸能夠看做座標系中的XY軸。

flex中與項目相關的屬性

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

  row 默認主軸爲水平方向，起點在左邊。
  複製代碼

row-reverse:主軸爲水平方向，起點在右邊。
複製代碼

column：主軸爲垂直方向，起點在上端。
複製代碼

column-reverse：主軸爲垂直方向，起點在下端。
複製代碼

• flex-wrap屬性定義，若是一條軸線排不下，如何換行。

  nowrap（默認）：不換行。
  複製代碼

wrap：換行，第一行在上方。
複製代碼

wrap-reverse：換行，第一行在下方。
複製代碼

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

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

  flex-start（默認值）：左對齊
  複製代碼

flex-end：右對齊
複製代碼

center： 居中
複製代碼

space-between：兩端對齊，項目之間的間隔都相等。
複製代碼

space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍
複製代碼

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

  flex-start：交叉軸的起點對齊。
  複製代碼

flex-end：交叉軸的終點對齊。
複製代碼

center：交叉軸的中點對齊。
複製代碼

baseline: 項目的第一行文字的基線對齊。
複製代碼

stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。
複製代碼

flex中與項目相關的屬性

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

• flex-grow屬性定義項目的放大比例，默認爲0，即存在剩餘空間，也不放大。

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

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。

• flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。它能夠設爲像素（好比50px），則項目將佔據固定空間。也能夠設置爲百分比（如50%）。
• align-self屬性容許單個項目有不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，繼承父元素的align-items屬性，若是沒有父元素，則至關於於stretch。

至此，flex佈局的基本屬性介紹完了。水平有限，請諒解。