CSSのdisplay: flex;の書き方！justify-contentとalign-itemsの使い方を徹底解説！
CSSのプロパティ、display: flex;。
justify-contentとalign-items、2つの違いが分からない、という方も多いのではないでしょうか。私も苦戦したので、そんな疑問に答えます。
justify-contentとalign-itemsの違い：主軸方向か交差軸方向か
結論から言うと、2つのプロパティの違いを決めるのは、指定の対象が「主軸方向か交差軸方向か」です。
- justify-content：flexアイテムの主軸方向の揃え方を指定
- align-items：flexコンテナ内のflexアイテムの交差軸方向の揃え方を指定
justify-content
justify-contentではflexアイテムの主軸方向の揃え方を指定します。
プロパティ値は以下です。
| flex-start | main startから詰めて配置 |
| flex-end | main endから詰めて配置 |
| center | 行の中央に向けて詰めて配置 |
| space-between | 主軸方向にそれぞれ均等に配置。 両端のアイテムはmain start/endにそれぞれくっついて配置。 |
| space-around | 主軸方向にそれぞれ均等に配置。 アイテム間の余白と、両端のアイテムからmain start/end間の余白は等しくなる。 |
flex-start
flex-end
center
space-between
space-around
align-items
align-itemsでは、flexコンテナ内のflexアイテムの交差軸方向の揃え方を指定します。
| flex-start | マージン辺をcross startに揃える |
| flex-end | マージン辺をcross endに揃える |
| center | 交差軸方向に中央揃え |
| baseline | ベースラインの位置を揃える |
| stretch | 高さを自動的に揃える |
flex-start
flex-end
center
baseline
stretch
主軸・交差軸とflex-direction
「そもそも主軸・交差軸が分からない」という場合もあると思うのでこちらも解説します。
簡単に言うと、flex-directionをもとに主軸が決まり、主軸をもとに交差軸が決まります。
- 主軸：ボックスの配置方向＝flex-directionで指定された方向
- 交差軸：主軸と交わる方向
flex-direction：ボックスの配置方向の指定
ボックスの配置方向、つまり主軸方向はプロパティflex-directionによって指定されます。以下、プロパティ値の一覧です。
| 値 | ボックスの配置方向 |
| row | 書字方向。初期値。 |
| row-reverse | 書字の逆方向。 |
| column | ブロック軸(行が増える方向)方向。 |
| column-reverse | ブロック軸の逆方向。 |
主軸
主軸とはアイテムの並ぶ方向です。
前述の通り、プロパティflex-directionでは、flexアイテムを並べる方向を指定することができます。この方向を主軸と言います。
交差軸
こちらは主軸と交差する軸、つまり主軸に対して垂直な軸です。
例えば主軸がrowの場合、主軸は横なので交差軸は縦です。
逆に主軸がcolumnの場合、主軸は縦なので交差軸は横になります。
最後に
以上！
justify-contentとalign-itemsの違いについてでした！
CSSは奥が深くて、理解するととても楽しいです！
それでは良いディベロッパーライフを！
Peace!