Flexboxのjustify-contentとalign-itemsで混乱した話

なぜこの記事を書いたのか

CSSで横並びを実現したい時にflexをよく使うと思いますが、
justify-content？align-items？縦横どっちの指定なの？って混乱しがちだったので自分のためにメモ

Flexboxとは？

Flexbox（正式名称：Flexible Box Layout）は、
要素を横並びや縦並びにレイアウトするためのCSSの仕組み

親要素（コンテナ）
で、
レイアウトを整えたい子要素（アイテム）
を囲むことで、flexboxによるレイアウトが作成できる。

例えば以下のようなHTMLがあった時

<div class="flex-container">
    <div class="flex-item">
        要素1
    </div>
    <div class="flex-item">
        要素2
    </div>
    <div class="flex-item">
        要素3
    </div>
</div>

親要素のdisplayにflexを指定すると親要素がflexコンテナになり、子要素が横並びになります。

.flex-container {
  display: flex;
}

親要素の基本的なプロパティ

flex-direction

子要素の主軸方向並び方を指定するプロパティ

値	説明
row（初期値）	主軸を水平方向に設定し、左から右へ子要素を並べる
row-reverse	主軸を水平方向に設定し、右から左へ子要素を並べる
column	主軸を垂直方向に設定し、上から下へ子要素を並べる
column-reverse	主軸を垂直方向に設定し、下から上へ子要素を並べる

主軸方向っていうのがポイント！

justify-content

主軸方向に対して子要素がどう並ぶかを決めるプロパティ

値	説明
flex-start（初期値）	主軸の先頭にる
center	主軸の中央に揃える
flex-end	主軸の終点に寄せる
space-between	主軸の両端に寄せて、間を等間隔に
space-around	主軸方向に前後に均等な余白をつける
space-evenly	主軸方向の全ての間隔を均等にする

align-items

交差軸方向に対して子要素がどう並ぶかを決めるプロパティ

値	効果（※交差軸方向に沿った整列）
stretch（初期値）	交差軸方向に子要素のサイズを引き伸ばす（高さが自動調整される）
flex-start	交差軸の先頭に揃える（通常は上揃え）
center	交差軸の中央に揃える（上下中央など）
flex-end	交差軸の終点に揃える（通常は下揃え）
baseline	各子要素の文字のベースラインに揃える

gap

要素同士のすき間を設定するプロパティ

値	説明
<長さ>（初期値：0）	行・列のすき間を指定。例：gap: 10px
<行の長さ> <列の長さ>	行方向と列方向の間隔を個別に指定。例：gap: 10px 20px

以下のプロパティを使って個別に指定することも可能

プロパティ名	説明	使用例
row-gap	行方向（縦）のすき間を指定する	row-gap: 10px;
column-gap	列方向（横）のすき間を指定する	column-gap: 20px;

注意点

justify-contentやalign-itemsは、それぞれ主軸と交差軸に対して要素を整列させるプロパティです。
主軸・交差軸は flex-direction によって変化するので、
並ぶ向き（見た目）が変わるので注意！！！！

例：justify-content: flex-start;

flex-direction の値	主軸方向	見た目
row（初期値）	左 → 右	左から並ぶ
row-reverse	右 → 左	右から並ぶ（見た目は右寄せ）
column	上 → 下	上から並ぶ
column-reverse	下 → 上	下から並ぶ（見た目は下寄せ）

まとめ

justify-contentとalign-itemsが縦横の指定をするって認識が、そもそも誤ってるってことに気づきました。

flex-direction：主軸の方向を決める
justify-content：主軸がどう並ぶかを決める
align-items：交差軸がどう並ぶか決める

と覚えておけば混乱しなそうです。

参考

※各プロパティのイメージは以下のサイトがわかりやすいが、
横並び/縦並びって説明をしているので、flex-directionによって変わることを抑えておかないと混乱する