flex-grow、flex-shrink、flex-basisはどのように機能しますか?

Question

Accepted Answer

これら3つのプロパティは**フレックスアイテム**上で、メインアクシス沿いのスペース共有方法を制御します。短記法`flex`がこれらを組み合わせます。

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## 各プロパティの説明

- **`flex-basis`** — アイテムの理想的/初期メインアクシスサイズ(行の場合は`width`のようなもの)。`auto`はコンテンツサイズを使用します。
- **`flex-grow`** — *余分な*スペースがある場合、このアイテムがどの程度貪欲に拡大するか。`0`=拡大しない;数値が高いほど比例して拡大します。
- **`flex-shrink`** — スペースが*足りない*場合、このアイテムがどの程度容易に縮小するか。`0`=縮小しない(オーバーフロー可能性あり);デフォルト`1`=必要に応じて縮小。

## 比例して成長する

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

余分なスペースは絶対サイズではなく、成長値の比率で分割されます。

## 一般的な短記法の値

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1`をすべてのアイテムに指定すると等幅カラムになります;`flex: 0 0 250px`は固定幅パネルを柔軟なパネルの隣に作成します。

## 実際のレイアウト:固定サイドバー + 流動的なコンテンツ

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## なぜ重要なのか

これらのプロパティは、フレックスレイアウトで比例サイジングを制御する方法です — 等幅カラム(`flex: 1`)、固定+流動パネル(`flex: 0 0 X` + `flex: 1`)、望まない縮小の防止(`flex-shrink: 0`)。

ベース/グロー/シュリンクを理解すると、Flexboxが「アイテムが置かれているだけ」から正確で応答性のあるコントロールに変わります。