Flexboxが便利すぎる...よく使いそうなプロパティまとめてみた

# はじめに
「この要素を、あっちにちょっとだけずらしたいんだけど…」「なんで横並びにならないんだ！？」
Webサイトのレイアウトで、そんな風に頭を悩ませたことはありませんか？ 実は、そんなレイアウトの悩みを解決してくれるCSSプロパティ、それが`Flexbox`なんです！

初めてWebサイトの模写に挑戦したとき、複写元のサイトでも
「`display: flex`設定しすぎだろ！」
となるぐらい使われていました。

この記事では、Webサイトを構築する上で必須の`Flexbox`の内容やよく使うプロパティを解説していきます。

※勉強の備忘をかねているため、間違っている箇所や修正した方がいい箇所等ございましたら、教えていただけると幸いです。

# そもそも「`Flexbox`」ってなに？

**簡単に言うと、要素を横並びにし、要素間の間隔や配置を自由に設定することができる**CSSプロパティです。

親要素に`display: flex`を設定することで、親要素が`Flexコンテナ`、親要素内の各要素が`Flexアイテム`となり、`Flexコンテナ`に特定のCSSプロパティを設定することで、`Flexアイテム`の配置や間隔などを指定することができる。

こんな感じ。
![flex.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4072067/d9fb4271-9b5a-48f4-9987-5f2e63618c2f.gif)


# `Flexbox`で重要な軸について
`Flexbox`を理解する上で、主軸と交差軸という2つの軸の概念がとても大切になります。  

例えるなら、電車の路線のようなものです。**主軸**は、電車が走るメインの線路。要素はこの線路に沿って一列に並びます。そして、**交差軸**は、その線路に対して垂直に伸びる方向。駅のホームの位置(１番ホーム・２番ホームのような)をイメージすると分かりやすいかもしれません。

各軸に対してCSSプロパティを設定することで、**要素を縦横無尽にコントロールできるのです。**

デフォルトでは横方向が**主軸**、縦方向が**交差軸**となっているため、デフォルト設定では、`Flexアイテム`は横方向に並びます。

![shaft image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4072067/6b9c8d69-614a-499b-8c61-49cdd82a31a1.jpeg)

# `Flexコンテナ`に設定する便利プロパティ

以降のメソッドやプロパティの説明に使うHTML・CSSのサンプルは以下のような内容になっています。(関係のないHTMLやプロパティは省略しています)

```html:demo.html
<body>
    <div class="parent-container">
        <div class="child-container1">Flexアイテム1</div>
        <div class="child-container2">Flexアイテム2</div>
        <div class="child-container3">Flexアイテム3</div>
    </div>
</body>
```
```css:demo.css
.parent-container {
    background-color: gray;
    display: flex;
}
.child-container1 {
    background-color: red;
}
.child-container2 {
    background-color: yellow;
}
.child-container3 {
    background-color: aqua;
}
```

初期イメージ
![flexonly image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4072067/527c2b3a-c113-4fe7-88d9-8e551ca6cbce.png)


## `justify-content`（主軸の配置変更）
> MDNドキュメント参照
> CSS の justify-content プロパティは、フレックスコンテナーの主軸、グリッドおよび段組みコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。

`Flexコンテナ`に設定する`Flexアイテム`の主軸方向への配置や余白を指定するプロパティです。
主軸はデフォルトでは横方向となるため、横方向に並ぶ子要素の配置を指定するプロパティです。

`justify-content`にも様々なプロパティがありますが、よく使いそうなものは👇の通りです。

### `justify-content: center;`
`Flexアイテム`を主軸の中央に配置するプロパティです。

![justify-center.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4072067/5075a849-41e5-4a2a-873e-139ed74e1bfe.gif)

### `justify-content: space-evenly;`
`Flexアイテム`間の左右の余白を均一にして配置するプロパティです。

![justify-space-evenly.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4072067/4bea8c9b-814c-4a46-b3a7-125fe2b911b0.gif)

### `justify-content`デモサイト
他にも様々なプロパティがあります！
MDNのサイトで、デモ形式で各プロパティの挙動を確認できるため、挙動の確認におすすめです。

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content#%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86

## `align-items`（交差軸の配置変更）
> MDNドキュメント参照
> CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。

`Flexコンテナ`に設定する`Flexアイテム`の交差軸方向への配置を指定するプロパティです。
主軸はデフォルトでは縦方向となるため、縦方向に並ぶ子要素の配置や余白を指定するプロパティです。

`align-items`にも様々なプロパティがありますが、よく使いそうなものは👇の通りです。

### `align-items: stretch;`
`Flexアイテム`をFlexアイテムを交差軸方向に、Flexコンテナの高さ（または幅）いっぱいに引き伸ばして表示するプロパティです。
**ただし、`Flexアイテム`に`width`(`flex-direction: row`の場合)または`heigth`(`flex-direction: column`の場合)を明示的に指定している場合は、`stretch`は適用されません。**

![align-aitem-stretch.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4072067/ab469093-d055-4494-a89e-7bdfaf60c209.gif)

### `align-items: center;`
`Flexアイテム`を交差軸の中央に配置するプロパティです。

![align-aitem-center.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4072067/808bde02-ffd6-4178-a148-a9b8aca449bd.gif)


### `align-items`デモサイト
他にも様々なプロパティがあります！
MDNのサイトで、デモ形式で各プロパティの挙動を確認できるため、挙動の確認におすすめです。

https://developer.mozilla.org/ja/docs/Web/CSS/align-items#%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%81%BE%E3%81%97%E3%82%87%E3%81%86

# 終わりに
今回ご紹介した内容は、`Flexbox`の基本的なプロパティの一部です。`flex-direction`を使用して、横並びではなく、縦方向に子要素を並べるなど様々なことができます！

今回ご紹介した内容だけでも、要素を綺麗に横並びにすることができるようになると思います！

`Flexbox`の学習をもっと深めたい場合は、ゲーム形式で楽しく学べる以下のサイトもおすすめです。
[flexboxfroggy](https://flexboxfroggy.com/#ja "flexboxfroggy")

最後までお読みいただき、ありがとうございました！

# 参考
・MDN公式ドキュメント
・[flexboxfroggy](https://flexboxfroggy.com/#ja "flexboxfroggy")