CSS 原理 - Flex(下)

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 屬性值須為 wrapwrap-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
#

Commentaires

Your browser is out-of-date!

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

×