CSS 原理 - Flex(上)

CSS 原理 - Flex(上)

接下來將介紹 flex,從先前 formatting context 的觀念開始,再詳細介紹每個屬性的用法以及 flex box 伸縮的計算方式。


display: flex | inline-flex

flex container 顧名思義就是一個容器(container),描述 flex 元素與其後裔元素之間的關係,當對一個元素設定 display: flex 時,此元素稱為 flex container,而其直接子元素則稱為 flex item




display: flex 的元素會生成 block-level boxflex container,所以該元素本身會參與 BFC 佈局,呈現垂直排列,另一方面,為其內容建立 FFC

display: inline-flex 的元素會生成 inline-level boxflex container,所以該元素本身會參與 IFC 佈局,且會為其內容建立 FFC


flex container

  • display 為 flexinline-flex 的元素。

  • flex container 會建立 flex formatting contex(FFC),所以此元素不會與 float 元素重疊。

  • column-* 屬性適用。


flex item

display 為 flex 或 inline-flex 元素的元素稱為 flex item

  • 建立 BFC,所以 flex items 之間不會發生 margin collapsing,也不會與其父元素(flex container)發生 margin collapsing。

  • 參與 FFC。

  • vertical-align 適用。

  • float 與 clear 適用。

  • 即使 flex item 是 display: inline 的元素,仍然可以透過 widthheight 屬性調整寬高。因 flex item 是 blockified



主軸(main axis)與副軸(cross axis)

flex items 可以透過 flex-direction 屬性來決定排列方向,flex-direction 同時也會決定主軸(main axis)副軸(cross axis)


圖片來源:W3C


flex-direction 共有四個屬性值,會受到書寫方向 writing-mode 影響。



橫向由左至右的書寫方式來說,此時 row 為橫向,column 為直向。

flex-direction: row

  • 主軸為 row 方向。
  • 副軸為 column 方向。
  • main startmain end 排列。

flex-direction: row-reverse

  • 主軸為 row 方向。
  • 副軸為 column 方向。
  • main endmain start 排列。

flex-direction: column

  • 主軸為 column 方向。
  • 副軸為 row 方向。
  • main startmain end 排列。

flex-direction:column-reverse

  • 主軸為 column 方向。
  • 副軸為 row 方向。
  • main endmain start 排列。

flex-wrap

flex-wrap 屬性適用於 flex container,有 nowrapwrapwrap-reverse 三種屬性值。


圖片來源:W3C


nowrap

1
flex-wrap: nowrap
  • 換行,為預設值。



wrap

1
flex-wrap: wrap;
  • 換行,由 cross start 開始向 cross end 堆疊。


wrap-reverse

1
flex-wrap: wrap-reverse;
  • 可換行,由 cross end 開始向 cross start 堆疊。


flex-flow 屬性

flex-direction 屬性與 flex-wrap 屬性的縮寫

例如:

1
flex-flow: row wrap;

上式等同於

1
2
flex-direction: row;   /* 預設值 */
flex-wrap: wrap;

又例如:

1
flex-flow: row-reverse wrap-reverse;

上式等同於

1
2
flex-direction: row-reverse;
flex-wrap: wrap-reverse;

order 屬性

order 屬性可以控制 flex items順序,會從 order 最小的開始排序。
僅適用於 flex items,屬性值須為整數(可為負數), 預設下皆為 0


圖片來源:W3C


直接看圖比較快~
例如在書寫方向為橫向且由左至右的前提下,若主軸(main axis)為 row,即 flex-direction: row,則 flex items 的會依照其 order 由左至右排序(order 愈小愈優先)。

  • 1 < 3 < 4




  • -5 < -2 < 4 < 8


若主軸(main axis)為 column,即 flex-direction: column,則 flex items 會依照其 order 由上至下排序(order 愈小愈優先)。

  • 1 < 3 < 4




  • -10 < 4 < 7 < 13



參考資料

  1. W3C-CSS Flexible Box Layout Module Level 1
  2. MDN-Controlling Ratios of Flex Items Along the Main Axis
  3. CSS TRICKS-A Complete Guide to Flexbox
#

Commentaires

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×