# flex (grow/shrink/basis)

> フレックスアイテムの伸縮性と基本サイズを制御するプロパティです。flex-grow（余白の配分比率）、flex-shrink（縮小比率）、flex-basis（基本サイズ）を組み合わせて、柔軟で予測可能なレイアウトを実現します。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/flex-grow-shrink-basis/

## 構文

```css
flex: <flex-grow> <flex-shrink> <flex-basis>
```

## Tailwindでは

- `flex-1` → flex: 1 1 0%
- `flex-auto` → flex: 1 1 auto
- `flex-none` → flex: none
- `grow` → flex-grow: 1
- `shrink-0` → flex-shrink: 0
- `basis-1/2` → flex-basis: 50%
- 補足: 「画像が潰れる」対策の flex-shrink: 0 は shrink-0。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 29+ / Firefox 20+ / Safari 9+ / Edge 12+

## コード例

### 例1: 固定サイドバーと可変メインコンテンツ

```css
.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}
```

### 例2: 最小300pxで均等に伸縮するカード

```css
.card {
  flex: 1 1 300px;
}
```

### 例3: 伸縮しない（flex: 0 0 auto と同じ）

```css
flex: none;
```

## TIPS

flex: 1は最も使用頻度が高い。レスポンシブデザインの基本。

## AIがよく間違えるポイント

flex: 1はflex: 1 1 0%の省略で、basisが0になるため「コンテンツ量に関係なく均等分配」になります。一方flex-grow: 1だけ指定するとbasisはautoのままで「コンテンツ量に応じた分配」です。この違いはAIの説明でも頻繁に曖昧にされます。また「flexアイテムがつぶれる/はみ出す」問題の多くはflex-shrinkとmin-width: autoの相互作用で、flex-shrink: 0またはmin-width: 0が処方箋です。

## AIへの依頼文例

- flex: 1とflex-grow: 1の違いを、このレイアウトでの実際の挙動の差で説明して
- flexで固定幅サイドバー+可変メインの定番レイアウトを、つぶれ防止（shrink: 0）込みで書いて

## 関連プロパティ

- [flex-wrap](https://www.css-dictionary.com/property/flex-wrap.md)
- [min-width](https://www.css-dictionary.com/property/min-width.md)
- [max-width](https://www.css-dictionary.com/property/max-width.md)