Flexboxとは

# Flexboxとは
- 複雑なレイアウトを簡単に組むことができるCSSのレイアウトモジュール

# 基本の使い方
![スクリーンショット 2022-10-15 4.06.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/e7711af1-f05c-98ce-b604-58565470e676.png)

- Flexコンテナー（親要素）とFlexアイテム(子要素)で構成されている

# 横並びにする/display: flex
```HTML:HTML
<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
</div>
```
![スクリーンショット 2022-10-15 4.11.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/b955910c-47bb-d97b-56e4-67ffb2fed180.png)

```CSS:CSS
.container {
  display: flex;
}

.item {
  background-color: aqua;
  margin: 10px;
  padding: 20px;
}
```
![スクリーンショット 2022-10-15 4.09.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/2aa7ba63-a581-0220-d9f5-4beaf48196d4.png)


# 子要素の並ぶ向きを指定/flex-direction
- 左から右へ並べる

```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  flex-direction: row;
}
```
![スクリーンショット 2022-10-15 4.13.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/9fa4f9dc-689e-13b8-c020-eedd3324c811.png)

- 右から順に並べる
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  flex-direction: row-reverse;
}
```
![スクリーンショット 2022-10-15 4.14.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/053d50bd-fead-a657-f595-f319c43ee09d.png)


- 上から順に並べる
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  flex-direction: column;
}
```
![スクリーンショット 2022-10-15 4.15.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/33934b0d-c963-4d03-a2ea-d0cd575f68ef.png)


- 下から順に並べる
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  flex-direction: column-reverse;
}
```
![スクリーンショット 2022-10-15 4.15.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/e3cf3e79-91f2-d36a-a030-12ecb587f90e.png)


# 子要素の折り返しを指定/display: flex
```html:HTML
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
      <div class="item">item4</div>
      <div class="item">item5</div>
      <div class="item">item6</div>
      <div class="item">item7</div>
      <div class="item">item8</div>
      <div class="item">item9</div>
      <div class="item">item10</div>
    </div>
  </body>
```

- 一列に並べる(ウインドウ幅で表示が変わる)
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  flex-wrap: nowrap;
}
```
![スクリーンショット 2022-10-15 4.18.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/a9e118ab-227d-a002-1662-5b6aaa47b4fe.png)


- 下に折り返しをつける(ウインドウ幅で表示が変わる)
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  flex-wrap: wrap;
}
```
![スクリーンショット 2022-10-15 4.19.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/d4ee1b64-0862-becc-0d96-287aaf53be7d.png)


- 上に折り返しをつける(ウインドウ幅で表示が変わる)

```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  flex-wrap: wrap-reverse;
}
```
![スクリーンショット 2022-10-15 4.19.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/b25a76f5-25ad-df3d-e2e2-95010cf29e3f.png)


# 子要素の水平方向の揃えを指定/

- 左揃え
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  justify-content: flex-start;
}
```
![スクリーンショット 2022-10-15 4.20.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/4600485d-4e31-86e6-2f26-6b2c21b4f54a.png)


- 右揃え
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  justify-content: flex-end;
}
```
![スクリーンショット 2022-10-15 4.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/e55de0d8-1670-6e01-ee96-8179192e33b2.png)


- 中央揃え
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  justify-content: center;
}
```
![スクリーンショット 2022-10-15 4.21.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/3c295b95-95fa-33e7-bcc2-f9372b5b9b2f.png)


# 両端と残りを均等に配置

```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  justify-content: space-between;
}
```
![スクリーンショット 2022-10-15 4.21.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/890d2649-4aac-c61a-b590-e52c3a3aa90e.png)


# 左右にアイテムの半分の大きさの余白をつくり残りを均等配置
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  justify-content: space-around;
}
```
![スクリーンショット 2022-10-15 4.22.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/338a2133-20af-bb38-3c4a-758da2b488d0.png)


# 左右にアイテムと同じ余白をつくり残りを均等配置
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  justify-content: space-evenly;
}
```
![スクリーンショット 2022-10-15 4.23.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/bc4077de-0447-1135-9ae2-4104bf770d43.png)


# 
```CSS:CSS
.container {
  display: flex;
  /* 下記１文を追加 */
  height: 100vh;
/* 親要素の高さや中身が一番多い子要素の高さに合わせて揃える */
  align-items: stretch;
  /* 親要素の高さ内で上揃え */
  align-items: flex-start;
  /* 親要素の高さ内で下揃え */
  align-items: flex-end;
  /* 親要素の高さ内で中央揃え */
  align-items: center;
  /* 子要素のベースラインで揃える */
  align-items: baseline;
}
```
-   align-items: stretch;
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/c31a911e-6d45-b078-3b21-447923a9194f.png" width=150 />

-   align-items: flex-start;
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/4469aa42-52ed-c8d2-d762-ecd98b2dd4f7.png" width=150 />

-   align-items: flex-end;
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/dcb1d15a-aa0e-2e73-936a-a1647772e960.png" width=150> 


-   align-items: center;
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/c7f7d904-fecf-dd49-8623-7019cb643836.png" width=150>

-   align-items: baseline;
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2904183/55021791-d580-9131-0966-75ae5d8b1ff0.png
" width=150>

[フレックスチートシート]https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet