軸線

• 主軸 (main axis) 與交錯軸 (cross axis) 的關係如下表
  • 二者一定是垂直關係
  • 交錯軸只有上至下與左至右 2 種

justify-content 與 align-items

• justify-content：是依照主軸的狀況來進行對齊，因此要確認 flex-direction 的設定值，預設值為 row 左至右
• 各屬性參數如下，參考圖面會比較了解，flex-direction：row
  • flex-start：對齊起始點(靠左對齊)
  • flex-end：對齊終點(靠右對齊)
  • center：對齊中間(置中對齊)
  • space-between：與外容器無間隔(前後不留)，剩下的空間平均分配(依下圖分 2 份)
  • space-around：與外容器有間隔(前後有留)，以內元件數均分(依下圖分 3 份)，前後 2 側各半
  • space-around：與外容器有間隔(前後有留)，剩下的空間依前後與間隔平均分配(依下圖分 4 份)

from：https://www.w3.org/TR/css-flexbox-1/#justify-content-property

from：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• align-items：是依照主軸的狀況來進行對齊，因此要確認 flex-direction 的設定值，預設值為 row 左至右，因此交錯軸為上至下
• 各屬性參數如下，參考圖面會比較了解，flex-direction：row
  • flex-start：對齊起始點(靠上對齊)
  • flex-end：對齊終點(靠下對齊)
  • center：對齊中間(垂直置中對齊)
  • stretch：內元件填滿整個容器
  • baseline：依照內元件的基準線(文字)對齊

from：https://www.w3.org/TR/css-flexbox-1/#align-items-property

from：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

最好實際把各個參數練習一下，感受排版的差異

Flex 六角線上模擬器

參考資料

• 圖解：CSS Flex 屬性一點也不難
• 深入解析 CSS Flexbox
• 圖解 Flexbox 基本屬性
• A Complete Guide to Flexbox

次回

再繼續說明 Flex