Flexbox 對齊方式記憶
· 閱讀時間約 2 分鐘
身為一個前端工程師，對於 Flexbox 的對齊方式一直沒有很有系統地方式去使用他，常常遇到要對齊置中的時候，就先用 align-item-center, 如果不行，然後再用 justify-content-center 試試看，如果再不行... 恩.. 應該就是父容器的高度問題了。
時至今日，應該要用一個方式來記憶他了
主軸 與 交錯軸
先搞清楚你是要控制 主軸 還是 控制 交錯軸
- justify-content 負責控制 主軸對齊
- align-items 負責控制 交錯軸對齊
Row 水平排列
Row 是水平排列，所以控制主軸的對齊就是 水平對齊
Flex
align-self
Flex
Column 垂直排列
Column 是垂直排列，所以控制主軸的對齊就是 垂直對齊
Flex
align-self
Flex
結論
所以我們只需要記，現在是 flex-row，那我想改垂直置中，那麼就控制主軸的相反 交錯軸是 align-item 在控制的
反之，如果現在是 flex-column，那我想改垂直置中，那麼的主軸 justify-content 在控制的