【CSS】FlexBoxとメディアクエリ

# 目次
1. [説明](#説明)
1. [書き方](#書き方)
1. [主軸と交差軸](#主軸と交差軸)
1. [主要プロパティ](#主要プロパティ)
1. 


# FlexBox

#### 説明
**複雑な配置**を簡単に行えるようにするために使われる。

#### 書き方
`display: flex;`
Flexboxを使うには、まず親要素に `display: flex;` を指定する

#### 主軸と交差軸
Flexboxのレイアウトには「主軸」と「交差軸」という2つの軸があり、これが非常に重要。

* **主軸**（デフォルトでは横方向、左から右）
    →子要素が並ぶ方向。
* **交差軸**（デフォルトでは縦方向）
→主軸と直交する方向。
---
---
#### 主要プロパティ
### `flex-direction`

#### 説明
**主軸の方向**を決める。要素が**どちらの方向に並ぶか**を制御できる。

#### 書き方
デフォルトは `row`（左から右に横並び）。
例えば、`flex-direction: column;` とすると、縦に並ぶ。

---

### `justify-content`

#### 説明
**主軸に沿って**、要素を**どのように配置するか**を指定する。

#### 書き方
* `flex-start`: 左寄せ（デフォルト）。
* `flex-end`: 右寄せ。
* `center`: 中央に配置。
* `space-between`: 要素の間に均等なスペースを入れる（両端はくっつく）。
* `space-around`: 要素の周りにスペースを入れる（両端にも半分のスペースが入る）。

---

### `align-items`

#### 説明
**交差軸に沿って**、要素を**どう整列させるか**を決める。

#### 書き方
* `flex-start`: 上寄せ。
* `flex-end`: 下寄せ。
* `center`: 中央に配置。
* `stretch`: 要素の高さを均等に引き伸ばす（デフォルト）。

---

### `flex-wrap`

#### 説明
**要素が一行に収まりきらない場合**に、**どう配置するか**を指定する。

#### 書き方
デフォルトは `nowrap`（折り返しなし）。
`flex-wrap: wrap;` と指定すると、要素が折り返されて次の行に配置される。

---

### `align-content`

#### 説明
Flexboxの要素が**複数行にまたがる場合**（つまり、`flex-wrap`が指定されている時）に、**交差軸の方向で各行全体の配置を決める**プロパティ。

#### 書き方
* `center`: 各行を交差軸の中央に寄せる。
* `flex-start`: 各行を交差軸の始点に寄せる（上寄せ）。
* `flex-end`: 各行を交差軸の終点に寄せる（下寄せ）。
* `space-between`: 行と行の間に均等なスペースを配置（端は詰まる）。
* `space-around`: 行と行の周りに均等なスペースを配置（端も半分のスペースができる）。


---

### `align-self`

#### 説明
**個別の要素**に対して**交差軸方向の整列方法を指定する**プロパティ。

#### 書き方
* `auto`: 親要素のalign-itemsの設定に従う（デフォルト）。
* `flex-start`: 要素を交差軸の始点（上寄せ）。
* `flex-end`: 要素を交差軸の終点（下寄せ）。
* `center`: 要素を中央に揃える。



---
---
#### 例
要素の並びや配置の方法を変更

![スクリーンショット 2024-10-15 16.55.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3890600/a0f8b91e-12e7-addc-f408-31a076a7b9f9.png)


```html:index.html
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
</div>
```
```css:index.css

/* コンテナの設定（青色背景の中に対して） */
.container {
  display: flex;
  flex-direction: row; /* デフォルトの左から右の横並び */
  justify-content: space-around; /* 主軸（横）に沿って要素を均等に配置 */
  align-items: center; /* 交差軸（縦）に沿って要素を中央に配置 */
  flex-wrap: wrap; /* 要素が多ければ次の行に折り返す */
}

/* 各ボックスのスタイル（赤色ボックスの中に対して） */
.box {
  flex-basis: 100px; /* ボックスの基本の幅を設定 */
  flex-grow: 1; /* 余ったスペースを均等に広げる */
}

/* align-selfの使用例：3番目のボックスだけ下に下げる */
.box3 {
  align-self: flex-end;
}

/* widthとかは省略 */
```


---
#### スペースが足りない時にどう縮めるか、余ってる時にどうのばすかのプロパティ
### `flex-basis`

#### 説明
widthやheightみたいな役割。
`width`との違いは`flex-basis`は**主軸の向きで大きくなる方向（縦なのか横なのか）が変わる。**

#### 書き方
```css
.box {
  flex-basis: 200px; /* 主軸方向の初期のサイズを200pxにする */
}
```

---

### `flex-grow`

#### 説明
**余ったスペースをどうするか**を設定できる

#### 書き方
1番目と5番目のボックスにそれぞれ`flex-grow: 1;`を設定すると、余白部分を1番目と5番目のボックスが均等に埋める。
```css
.box:nth-of-type(1),
.box:nth-of-type(5) {
  flex-grow: 1; /* 余ったスペースを均等に分けて埋める */
}
```
* `0`: 要素はスペースを伸ばさない（デフォルト）。
* `1`~: 要素が余ったスペースを均等に埋める（値が大きいほどより多くのスペースを埋める）。

---

### `flex-shrink`

#### 説明
**スペースが足りない時にどう要素を縮めるか**
0は何も動かなくなる
画面を縮めた時にどれを先に小さくするか指定できる
レスポンシブ書く時によく使えそう

#### 書き方
例えば、1番目のボックスが縮まないようにしたい場合は、flex-shrink: 0;と指定することで、他の要素が縮んでも1番目のボックスは縮まないようにできる。
```css
.box:nth-of-type(1) {
  flex-shrink: 0; /* 1番目のボックスは縮まない */
}
```

---

### 省略形プロパティ `flex`

#### 説明
`flex-grow`、`flex-shrink`、`flex-basis` の値をまとめて指定できる省略形。

#### 書き方
* 3つの値（`grow` / `shrink` / `basis`）：`flex: 1 1 100px;`
* 2つの値 単位あり（`grow` / `basis`）：`flex: 1 100px;`
* 2つの値 単位なし（`grow` / `shrink`）：`flex: 1 1;`
* 1つの値（`grow`）：`flex: 1;`


# メディアクエリー

#### 説明
レスポンシブデザインのためのcss

#### 使用例
デバイス毎にcssを変える
```css
/* 小型デバイス（576px以上のとき） */
@media (min-width: 576px) { ... }

/* 中型デバイス（768px以上のとき） */
@media (min-width: 768px) { ... }

/* 大型デバイス（992px以上のとき） */
@media (min-width: 992px) { ... }

/* 特大デバイス（1200px以上のとき） */
@media (min-width: 1200px) { ... }

/* 超特大デバイス（1400px以上のとき） */
@media (min-width: 1400px) { ... }
```

#### 書き方

* **`max-width` と `min-width`**
    ```css
    @media (max-width: 768px) {
      /* 768px以下の場合のスタイル */
    }
    
    @media (min-width: 768px) {
      /* 768px以上の場合のスタイル */
    }
    ```
    　
* **`orientation`**
    ```css
    @media (orientation: landscape) {
      /* 横向きの時に適用するスタイル */
    }
    ```

#### メモ
flexとメディアクエリを使うことで画面が小さくなった時にナビゲーションバーを横積みから縦積みにすることができる