Flex Box 概念梳理

前言

最近從新學習了一下Flex Box，把知識點和相關概念作了一個梳理。加深記憶，方便回顧。

參考內容：

• Flex 佈局基本概念
• CSS reference
• 阮一峯 Flex 佈局教程
• CSS 參考手冊

Flex Box

Flexible Box 模型，一般被稱爲 flexbox，是一種一維的佈局模型。

之因此說 flexbox 是一種一維的佈局，是由於一個 flexbox 一次只能處理一個維度上的元素佈局，一行或者一列。做爲對比的是另一個二維佈局 CSS Grid Layout，能夠同時處理行和列上的佈局。

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），容器裏的子元素稱爲項目（item）。

1.容器

• 概念

從容器的角度來看，有兩個不變的軸，主軸由 flex-direction 定義，另外一根軸始終垂直於它。默認定義是：

​ 1) 水平方向的主軸（main axis），主軸開始位置稱爲main start，結束位置稱爲 main end

​ 2) 垂直方向的交叉軸（cross axis），交叉軸開始位置稱爲 cross start，結束位置稱爲 cross end

• 相關屬性

  • flex-direction：定義了主軸方向。決定容器內項目排列方向，默認從左到右row。若是你選擇了 row 或者 row-reverse，你的主軸將沿着 inline(行級)方向延伸；選擇 column 或者 column-reverse 時，你的主軸會沿着上下方向延伸 — 也就是 block(塊級) 排列的方向。

    flex-direction：row | row-reverse | column | column-reverse
    複製代碼

    特別注意：flex-direction設置後會引發主軸和交叉軸方向改變。

• flex-wrap：決定容器主軸方向上項目是否換行，默認不換行nowrap。reverse表示逆序。

  flex-wrap: nowrap | wrap | wrap-reverse;
  複製代碼

• flex-flow：是flex-direction 和flex-wrap屬性的簡寫。默認爲：row nowrap。

  flex-flow: <flex-direction> || <flex-wrap>;
  複製代碼

• justify-content：決定容器內項目在主軸上對齊方式。默認左對齊 flex-start。

  justify-content: flex-start | flex-end | center | space-between | space-around;
  /**
  * flex-start（默認值）：左對齊。項目堆放在容器主軸開始位置(main start)；
  * flex-end：右對齊。項目堆放在容器主軸結束位置(main end)；
  * center： 居中。項目沿着主軸居中排列；
  * space-between：兩端對齊，項目之間的間隔都相等。
  * space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。
  **/
  複製代碼

• align-items：決定容器內項目在交叉軸上對齊方式。默認爲stretch。

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

• align-content：決定容器內項目在交叉軸上內容與剩餘空間對齊方式。默認爲 stretch。

  特別注意：該屬性只對設置了`flex-wrap:wrap`的容器生效，而且容器裏的元素構成了多行。

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

  案例參考地址：codepen.io/pen/

  

2.項目

• 概念

  項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

• 相關屬性

  • order：定義項目在容器主軸方向上的排列順序，數值越小排列越靠前。默認爲 0 。

    order: <integer>;
    複製代碼

• flex-grow：定義項目基於 flex-basis 放大比例，默認爲 0 ，即使容器存在剩餘空間，也不放大。不容許負值。

剩餘空間：元素佔據完容器空間後的佈局空白

flex-grow: <number>; /* default 0 */
/** * 若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。 * 若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。 **/
複製代碼

• flex-shrink：定義項目在容器空間不足時的基於 flex-basis 縮小比例，默認爲1，不容許負值。容器空間不足時該項目要縮小，而且項目內容會換行。只有在flex元素總和超出主軸纔會生效。

  flex-shrink: <number>; /* default 1 */
  /** * 若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。 * 若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。 **/
  複製代碼

• flex-basis：能夠理解成設置項目默認大小。定義項目分配多餘空間以前，在主軸上佔據的空間。默認爲auto，即項目內容大小。

  flex-basis: <length> | auto; /* default auto */
  複製代碼

  若是容器內全部項目大小總和超過容器，不設置 wrap 的狀況下會溢出容器：

• flex：是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

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

  flex 有幾種預約義的值：

  • flex: initial 是把flex元素重置爲Flexbox的初始值，它至關於 flex: 0 1 auto。
  • flex: auto 等同於 flex: 1 1 auto,代表元素既能夠拉伸也能夠收縮。
  • flex: none 能夠把flex元素設置爲不可伸縮。它和設置爲 flex: 0 0 auto 是同樣的。
  • flex: <positive-number> 常看到的 flex: 1 或者 flex: 2 等等。它至關於flex: 1 1 0或 flex:2 2 0。元素能夠在以 flex-basis爲0的基礎上伸縮。
  建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

• align-self：用於設置單個項目在交叉軸上對齊方式，可覆蓋容器的 align-items屬性，默認爲 auto。若是值爲auto，則計算值爲父元素的 ' align-items ' 值，不然爲指定值。

  align-self: auto | flex-start | flex-end | center | baseline | stretch;
  複製代碼

3.總結

以上把 Flex box 基本知識點作了大致的梳理，具體實戰案例後面再更。。。

注：題圖出處flexgrow