はじめに
CSSのflexを使う時に様々なオプションが出てきますよね。
その中で名前が似ているタイトルのプロパティについて少し検証したので書きました。
タイトルの違いについて調べた理由はplace-itemsというalign-itemsおよびjustify-itemsを一括で設定できるプロパティを知って、中央寄せしようとした時にうまく行かなかったからです。
結論から
justify系は主軸
align系は交差軸
◯◯-content系は余白間隔
◯◯-items系はアイテムの配置
です。
justify-content
justify-items
align-content
align-items
解説
MDN Web docsを見ると詳しく書いてあります。この記事では自分なりに解説をします。
主軸・交差軸とは
フレックスボックスはデフォルトの場合、横方向に要素が追加されていくと思います。その方向が主軸です。
そして、逆方向である縦方向が交差軸です。
flex-direction: column;などで向きを変えれば、逆になります。
alignプロパティを試してみた
content系は余白の間隔と言いました。中央寄せする場合を見てみます。
wrapなしalign
align-contentでは中央寄せされないのは、仕様です。
https://developer.mozilla.org/ja/docs/Web/CSS/align-content
単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がありません。
flex-wrapがnowrapの場合、1行であるため交差軸の余白は存在しないからですかね。（この予想はかなり怪しいです）
| flex-wrap | align |
|---|---|
 |  |
wrapありalign
flex-wrapがwrapの場合、どちらのプロパティも中央寄せされる。
しかし、中央の寄せ方がalign-contentとalign-itemsでは少々異なります。
| flex-wrap | align |
|---|---|
 |  |
justify
alignとほとんど一緒です。
ただ、justify-itemsは、
フレックスボックスレイアウトでは、このプロパティは無視されます
みたいです。
See the Pen abOrydr by MyPoZi (@shigasy) on CodePen.
余談
place-itemsというalign-itemsおよびjustify-itemsを一括で設定できるプロパティがあるのですが、place-items: center;で中央寄せされなかった理由は、justify-itemsがフレックスボックスレイアウトでは、無視されていたからみたいですね。place-contentもあるのですが、単一行のフレックスコンテナー (つまり、 flex-wrap: nowrap のもの) では、このプロパティは効果がない仕様ですね。
まとめ
justify系は主軸
align系は交差軸
◯◯-content系は余白間隔
◯◯-items系はアイテムの配置
です。
flexで単純に中央寄せしたいなら
.hoge-class{align-items:center;justify-content:center;}などを使いましょう！
CodePen埋め込み殆ど出来てなくて申し訳ないです。