屬性

• display
• flex-flow
  • flex-direction
  • flex-wrap
• justify-content
• align-items
• align-content

本篇將從 justify-content 開始介紹，flex-wrap 以前的屬性可以查看 Day 15 - [Part 1] Flexbox 外容器介紹。

justify-content

以 main axis 的方向作排序。

• flex-start

預設值，flex item 從 flex container 的開頭開始排起。

• flex-end

flex item 向右對齊。

• center

flex item 置中。

• space-between

每個 flex item 之間的間距是相同的。第一個 flex item 與 main axis 邊緣切齊，最後一個 flex item 與 main end 邊緣切齊。

• space-around

flex item 和 flex item 之間的間距會是一樣，但在 main start 到第一個 flex item 和最後一個 flex item 到 main end 的間距會是 flex item 和 flex item 之間的間距的一半。

• space-evenly

flex item 沿著 main axis 平均分佈在 flex container 裡面。

每個 flex item 之間的間距，main start 和第一個 flex item ，最後一個 flex item 到 main end 的間距，都完全相同。

align-content

CodePen 範例

在 flex container 中，如果我們將 flex-wrap 設置為 wrap 或 wrap-reverse，align-content 才會有效，如果flex-wrap: no-wrap，align-content 將不會起作用。

當 cross axis 上有額外空間時，flex items 會跟著 align-content的值 做反應，沿著 cross axis 做排序。

• flex-start / start：flex items 都擠在 cross axis 的起點。
  

• flex-end / end：flex items 都擠在 cross axis 的終點。

• center: flex items 在 cross axis 的中點。

• space-between: cross axis 之間有相等的間距。

• space-around：平均分布 flex items，在cross-start 到第一列 flex item 和最後一列 flex item 到 cross end 有一半大小的空間。

• space-evenly: cross axis 在其之前、之間和之後帶有空間，並且大小都相同。

• stretch：為預設值，將 flex item 的 height 或是 width 佔據剩餘的空間。

align-items

跟 justify-content 很像，但是只適用於單行的 flex item，也就是說flex-wrap: no-wrap，align-items 才會起作用。

CodePen 範例

• stretch (預設): 將 flex item 的 height 或是 width 佔據剩餘的空間，但是如果 flex item 有設置 min-height，max-height，min-width，max-width 則仍是遵守 min-height，max-height，min-width，max-width的值。

• flex-start / start / self-start：flex items 集中在 cross axis 的起點。

• flex-end / end / self-end: flex items 集中在 cross axis 的終點。

• center：flex item 在 cross axis 的中間。

• baseline: flex item 裡面的 content 會和另外一個 flex item 裡面的 content 互相對齊。

參考資料：
flex-direction 屬性介紹
[Day07] flex-wrap 換行 / flex-flow
justify-content
align-content