# Flexbox と Grid の違い（使い分け）

> 1方向の並び（ナビ、ボタン列、中央寄せ）はflex、行と列を同時に制御するレイアウト（カード一覧、ページ骨格）はgrid。「デザインが表・格子に見えるならgrid」が目安です。

- URL: https://www.css-dictionary.com/compare/flex-vs-grid/

## 比較表

| 観点 | Flexbox | Grid |
| --- | --- | --- |
| 次元 | 1次元（行または列の流れ） | 2次元（行と列を同時に定義） |
| サイズの主導権 | コンテンツ主導（中身に応じて伸縮） | レイアウト主導（先にトラックを定義して流し込む） |
| 典型用途 | ヘッダー内の横並び、ボタングループ、中央寄せ | カードグリッド、ページ全体の骨格、フォームの整列 |
| 子孫の整列 | 入れ子のflexが増えがち | grid-template-areasやsubgridで深い整列も1つで管理 |
| gap | 対応（全ブラウザ） | 対応 |

## 使い分けの指針

迷ったら「行と列の両方を揃えたいか」で判断します。両方ならgrid、片方ならflex。flexの入れ子が3段以上になったら、gridで書き直せないか疑うのが良いサインです。両者は排他ではなく、grid骨格の中の部品にflexを使うのが実務の標準形です。

## AIがよくやる取り違え

AIはgridで一発のレイアウトをflexの入れ子で組みがちです。「gridで書き直せないか」を一度聞くだけでコードが大幅に簡潔になることがあります。

## それぞれの詳しい解説

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [display-grid](https://www.css-dictionary.com/property/display-grid.md)