# display: flex

> 要素をフレックスコンテナに変換し、子要素（フレックスアイテム）を柔軟にレイアウトできるプロパティです。1次元レイアウト（行または列）の配置に最適で、モダンWebデザインの基礎となります。

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

## 構文

```css
display: flex
```

## Tailwindでは

- `flex` → display: flex
- `inline-flex` → display: inline-flex

## ブラウザ対応

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

## コード例

### 例1: 子要素を水平・垂直中央に配置する最も簡単な方法

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

### 例2: ナビゲーションバー：左端と右端に要素を配置

```css
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
```

### 例3: レスポンシブなカードレイアウト：幅が足りない場合は折り返し

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

### 例4: サイドバーレイアウト：固定幅サイドバーと可変メインコンテンツ

```css
.sidebar-layout {
  display: flex;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}
```

## TIPS

中央配置、等間隔配置、レスポンシブレイアウトが簡単に実現できる。子要素にflex: 1を指定すると等幅になる。gap プロパティで間隔調整が便利。

## よくある間違い

親要素にdisplay: flexを指定し忘れると子要素のflexプロパティが効かない。flex-direction を理解せずに使うと意図しない配置になる。

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

AIの定番ミスはflex-direction: columnにしたときにjustify-contentとalign-itemsの軸が入れ替わる点の混同です（justify-contentは常に主軸方向）。「縦中央にしたいのに効かない」場合はまず方向と軸の対応を疑ってください。

## AIへの依頼文例

- flex-direction: columnのコンテナで子要素を縦横中央にしたい。justify-contentとalign-itemsの軸を間違えずに書いて
- このflexレイアウトが折り返したときに崩れる原因を、flex-wrapとalign-contentの観点で調査して

## 関連プロパティ

- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)
- [justify-content](https://www.css-dictionary.com/property/justify-content.md)
- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [flex-wrap](https://www.css-dictionary.com/property/flex-wrap.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [flex-grow-shrink-basis](https://www.css-dictionary.com/property/flex-grow-shrink-basis.md)
- [order](https://www.css-dictionary.com/property/order.md)