Flexbox完全入門：一度組んだら崩れない、堅牢なレイアウトの設計思想

## 概要

フロントエンド開発において、レイアウトの崩れは最大の敵だ。  
特に画面幅が変わるレスポンシブ環境では、**意図しない折返しやはみ出し**が簡単に発生する。

そこで使われるのが `display: flex`──通称「Flexbox」。  
ただし、単に `flex` を指定しただけでは、**思い通りの挙動にはならない**。  
本当に重要なのは、**Flexboxを構造として理解し、目的に応じたプロパティを最適に設計すること**だ。

この記事では、Flexboxをゼロから理解し、現場で崩れないUIを作るためのプロパティ設計とベストプラクティスを解説する。

---

## 対象環境

```text
全主要ブラウザ（Chrome / Firefox / Safari / Edge / モバイル対応）  
CSS3以降の環境
```

---

## Flexboxとは何か？

- 子要素の**方向・サイズ・折返し・整列**を制御するためのレイアウトモデル
- 要素間のスペースを柔軟に配分できる（→ “Flexible Box”）
- グリッドと違い、1軸（主軸）でレイアウトを行う

---

## 基本構文

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

```html
<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

これだけで子要素は横並びになる。  
だが、Flexboxの真価は**プロパティ設計の組み合わせ**にある。

---

## 覚えておくべき主軸と交差軸の概念

| 用語        | 横向き (`flex-direction: row`) | 縦向き (`flex-direction: column`) |
|-------------|-------------------------------|-----------------------------------|
| 主軸        | 横方向                         | 縦方向                            |
| 交差軸      | 縦方向                         | 横方向                            |

---

## よく使うFlexboxプロパティ設計

### `flex-direction`

```css
flex-direction: row;    /* 横並び（デフォルト） */
flex-direction: column; /* 縦並び */
```

---

### `justify-content`（主軸方向の整列）

```css
justify-content: flex-start;   /* 左詰め */
justify-content: flex-end;     /* 右詰め */
justify-content: center;       /* 中央寄せ */
justify-content: space-between;/* 両端寄せ */
justify-content: space-around; /* 均等配置 */
```

---

### `align-items`（交差軸方向の整列）

```css
align-items: stretch;    /* 高さを揃える（デフォルト） */
align-items: flex-start; /* 上寄せ */
align-items: flex-end;   /* 下寄せ */
align-items: center;     /* 中央揃え */
```

---

### `flex-wrap`

```css
flex-wrap: nowrap;      /* 折返しなし（デフォルト） */
flex-wrap: wrap;        /* 折返し可能にする */
```

→ 複数行対応レイアウトには必須。これを指定しないと**横幅が溢れて崩れる**原因に。

---

## 子要素側での設計：`flex-grow`, `flex-shrink`, `flex-basis`

```css
.item {
  flex: 1; /* = flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
}
```

- `flex-grow`: 空きスペースの分配
- `flex-shrink`: 要素が小さくなる許容度
- `flex-basis`: 初期幅（例：`200px`）

---

### よくある例：2カラム構成

```css
.left {
  flex: 0 0 200px; /* 固定幅 */
}
.right {
  flex: 1;         /* 残りを自動で埋める */
}
```

---

## 実用例：レスポンシブ対応の横並びカード

```html
<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>
```

```css
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.card {
  flex: 1 1 300px;
  min-width: 250px;
}
```

- `flex-wrap: wrap` → 横幅に収まらなければ自動で折返し
- `gap` → 要素間のスペースも自動調整
- `min-width` → 小さくなりすぎるのを防ぐ

---

## よくある落とし穴と対策

### ❌ `width` と `flex-grow` を併用して意図が競合する

```css
.item {
  width: 100px;
  flex-grow: 1;
}
```

→ この場合、`width` が固定されて `flex-grow` が無視されることがある。  
→ ✅ 明示的に `flex-basis` を使う or `width` を避ける

---

### ❌ 高さが揃わない

```css
align-items: stretch; /* デフォルトがこれ */
```

→ アイテムの内容量が違うと高さがバラつく  
→ ✅ 明示的に `align-items: flex-start` や `min-height` を指定

---

### ❌ 中央寄せできない問題

```css
.container {
  justify-content: center;
  align-items: center;
}
```

→ **横と縦の両方で中央揃えしたいとき**にこの組み合わせを忘れがち

---

## 結語

Flexboxはただの「横並びツール」ではない。  
それは「空間をどう分けるか」を設計する、**モダンなレイアウトエンジン**だ。

崩れないUI、拡張しやすい構造、見た目と設計の一致──  
それを実現するために、Flexboxの構成要素を理解し、**意図して使う**ことが必要不可欠だ。

思い通りに組めたレイアウトは、コードの自信になる。  
Flexboxは、**崩れないフロントエンドの第一歩**である。