CSS 原理 - Flex(下)

vertical-align、text-align 甚至 float 都是控制不了 flex items 的，flex 有自己專屬的對齊屬性，而因對齊分為水平對齊與垂直對齊，所以首先要先認清楚誰是主軸(main axis)誰是副軸(cross axis)，才不會精神分裂。

先稍微複習一下，主軸(main axis)與副軸(cross axis)的方向取決於 flex direction 屬性與書寫模式 writing-mode，可參考先前文章 CSS 原理 - Flex(上)。

flex 的對齊

要小心的是，有些屬性是適用於 flex container，有些屬性則適用於 flex items，用錯地方是沒反應的唷。

適用於 flex container 的對齊屬性

• justify-content
• align-items
• align-content

適用於 flex items 的對齊屬性

• align-self

justify-content 屬性

控制 flex items 在主軸(main axis)方向的對齊方式，僅適用於 flex container。以下為幾個常用且瀏覽器支援度較高的屬性值：

• flex-start

為預設值，flex items 由主軸的始端開始排列。

• flex-end

flex items 由主軸的末端開始排列。

• center

flex items 置中於主軸。

• space-between

第一個 flex item 對齊主軸的始端，最後一個 flex item 對齊主軸的末端，其餘空間平均分佈於 flex items 之間。

• space-around

以 flex-direction: row 來看，每個 flex item 左右像自備 x 空間，第一個與最後一個 flex item 與 container 的之間有 x 空間，而 flex items 兩兩之間有 2x 空間。

• pace-evenly

以 flex-direction: row 來看，每個 flex item 左右各有 x 空間，第一個與最後一個 flex item 與 container 的之間的空間亦為 x。

圖形輔助

用圖形非常好理解，在水平且由左至右的書寫模式下，若主軸為 row (flex-direction：row)，使用此六種屬性值會呈現下圖中的結果。

圖片來源：CSS TRICKS

align-items 屬性

控制 flex items 在副軸(cross axis)方向上的對齊方式，僅適用於 flex container。以下為幾個常用且瀏覽器支援度較高的值。

• flex-start

flex items 由副軸的始端開始排列。

• flex-end

flex items 由副軸的末端開始排列。

• center

flex items 置中於副軸。

• stretch

為預設值，這也是為什麼 flex item 在預設下會撐滿容器在副軸上的空間。

• baseline

flex items 依照 baseline 對齊。

圖形輔助

在水平且由左至右的書寫模式下，若副軸為 column (flex-direction：row)，使用此五種屬性值會呈現下圖中的結果。

圖片來源：CSS TRICKS

align-content 屬性

控制「多行(multi-line)主軸」在副軸上的對齊方式，也就是前提為 flex container 的 flex-wrap 屬性值須為 wrap 或 wrap-reverse，而非預設的 flex-wrap: nowrap。僅適用於 flex container。

以下圖形範例以主軸(main axis)為 row(橫向)，副軸(cross axis)為 column(縱向)來說，即 flex-direction: row 下：

• flex-start

「多行(multi-line)主軸」對齊副軸的始端。

• flex-end

「多行(multi-line)主軸」對齊副軸的末端。

• center

「多行(multi-line)主軸」置中於副軸。

• space-between

第一個與最後一個 line 對齊副軸的始端與末端，其餘空間平均分佈於 flex items 之間。

• stretch

延伸撐滿副軸。

• space-around

每個 line 兩旁像自備 x 空間，第一個與最後一個 line 與 container 的之間有 x 空間，而 lines 兩兩之間有 2x 空間。

• space-evenly

每個 line 左右各有 x 空間，第一個與最後一個 line 與 container 的之間的空間亦為 x。

align-self 屬性

也可以單獨控制個別 flex item 在副軸上的對齊方式。僅適用於 flex items。

以主軸(main axis)為 row(橫向)，副軸(cross axis)為 column(縱向)來說，即 flex-direction: row 下：

• flex-start

flex item 由副軸的始端開始排列。

• flex-end

flex item 由副軸的末端開始排列。

• center

flex item 置中於副軸。

• stretch

flex item 撐滿副軸。

• baseline

flex item 對齊 baseline。

總整理

• 適用於 flex container

  • justify-content
    控制主軸上所有 flex items 的對齊。
  • align-items
    控制副軸上所有 flex items 的對齊。
  • align-content
    控制「多行(multi-line)主軸」在副軸上的對齊方式。
    
    

• 適用於 flex items

  • align-self
    控制副軸上個別 flex item 的對齊。

參考資料

1. W3C - Flexible Box Layout Module Level 1
2. MDN - Aligning Items in a Flex Container
3. CSS TRICKS - A Complete Guide to Flexbox