文章將陸續整理並更新至個人部落格。

flex 有自己專屬的對齊屬性，vertical-align、text-align 甚至 float 都是叫不動 flex items 的。想要讓 flex items 對齊，首先要先確定主軸(main axis)與副軸(cross axis)的方向，而這取決於 flex direction 屬性與書寫模式 writing-mode。

在上一篇文章中介紹了 justify-content 與 align-items 兩個屬性，今天將介紹 align-content 與 align-self。同樣的，在進入主題前，快速複習一下這兩張圖。

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 的對齊。

有關 flex 的對齊屬性就告一段落拉！
掰囉

參考資料

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