【CSS】justify-contentとalign-contentの違い

CSS全然わからんマンが、justify-content と align-content の違いを理解した（はず）のでメモ。
「justify-contentは横軸に対する位置、align-contentは縦軸に対する位置」みたいに説明してるところがいくつかあって、 色々誤解を招くんじゃないかと思った（実際に誤解してた）。

結論

• justify-content：Flexコンテナの主軸に対する配置
• align-content：Flexコンテナの交差軸に対する配置

developer.mozilla.org developer.mozilla.org

なお、Flexコンテナの主軸は flex-direction プロパティに対して指定する。（row or column）

主軸・交差軸について

そもそも「主軸」「交差軸」についてピンと来てなかった。
Flexコンテナは「Flexアイテムをどの方向に配置するか」を決めることができ、その方向を「主軸」としている。
デフォルトの場合、主軸は横方向（row）なので、交差軸は縦になる。
逆に主軸を縦（column）にした場合は、交差軸が横になる。

---

Flexbox、考え方がシンプルでいいっすね。（難しいけど）