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 box 與 flex container，所以該元素本身會參與 BFC 佈局，呈現垂直排列，另一方面，為其內容建立 FFC。

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

flex container

• display 為 flex 或 inline-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 的元素，仍然可以透過 width 與 height 屬性調整寬高。因 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 start 至 main end 排列。

flex-direction: row-reverse

• 主軸為 row 方向。
• 副軸為 column 方向。
• 由 main end 至 main start 排列。

flex-direction: column

• 主軸為 column 方向。
• 副軸為 row 方向。
• 由 main start 至 main end 排列。

flex-direction:column-reverse

• 主軸為 column 方向。
• 副軸為 row 方向。
• 由 main end 至 main start 排列。

flex-wrap

flex-wrap 屬性適用於 flex container，有 nowrap、wrap 與 wrap-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