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

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

## Flexboxとは？

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

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

例えば以下のようなHTMLがあった時
```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コンテナになり、子要素が横並びになります。

```css
.flex-container {
  display: flex;
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4077384/84a85a42-60ea-46dd-a295-1b80f6c63d31.png)



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

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

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




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


### 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：交差軸がどう並ぶか決める

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

## 参考
https://www.asobou.co.jp/blog/web/flex-box

https://zenn.dev/umatoma/articles/e6c4051f4c882d

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

https://web-cheatsheet.com/css-flexbox