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

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

flex 對齊相關屬性

有些屬性適用於 flex container，有些屬性適用於 flex items，程式碼下錯地方是沒反應的唷～

• 適用於 flex container

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

• 適用於 flex items

  • align-self

justify-content 屬性

控制 flex items 在主軸(main axis)方向的對齊方式，或者說如何分配 flex items 周圍的剩餘空間(主軸方向上的)，僅適用於 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 空間。
  

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

看圖最快

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

圖片來源：CSS TRICKS

align-items 屬性

控制 flex items 在副軸(cross axis)方向上的對齊方式，或者說如何分配 flex items 周圍的剩餘空間(副軸方向上的)，僅適用於 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

結語

一個是控制主軸(main axis)方向的對齊，一個是控制副軸(cross axis)方向的對齊，先認清楚誰是主軸誰是副軸，才不會精神分裂～

最後還剩下 align-content 和 align-self 還沒介紹
下集待續～掰

參考資料

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