CSS Flexbox と Grid：どちらを使用すべきかレイアウト

CSS Flexbox と CSS Grid は现代 CSS 中最も強力の两个レイアウト系统。だがそれ们時々できる生み出す相似の結果，しかしそれ们は针正異なる问题設計するの根本異なるのツール。のために毎種類情况選択する正しくのレイアウト方式させるあなたの CSS より明確に、より易維持する、より予測可能。このガイド提供するた詳細の比較すると实用のコード例，させるあなたできる自信に做出レイアウト决策。

とは CSS Flexbox？

CSS Flexbox レイアウト，通常と呼ばれる Flexbox，は一種の一次元レイアウトモデル。それ擅長沿単个軸（水平行または垂直列）分配空间。Flexbox させるコンテナ内の项目できる弹性伸缩、成長、收缩とに基づく利用可能空间自行配置。

Flexbox を目的とする解决传统 CSS 中出た名困難の常见レイアウト问题：垂直中央揃え元素、で兄弟元素の間均匀分配空间ならびにで不より改 HTML の情况下重新規並べ替える内容。で Flexbox 出现前に，開発者依赖浮动、inline-block 技巧とテーブルレイアウト来実装するこれらの效果。

Flexbox 核心概念

• Flex コンテナ：適用するた display: flex の父元素。
• Flex 项目：Flex コンテナの直接子元素。
• 主軸：レイアウトの主に方向（默考える水平，由 flex-direction 制御する）。
• クロス軸：と主軸垂直の方向。
• Flex 成長/收缩/基准：制御する项目どのように拡張機能と收缩もって填充利用可能空间の属性。

Flexbox 例：ナビゲーションバー

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  gap: 16px;
  list-style: none;
}

此ナビゲーションバー使用 Flexbox を通じて justify-content: space-between する logo 推まで左侧，リンク推まで右侧。项目を通じて align-items: center 垂直中央揃え。これは一つの经典の一次元レイアウト，Flexbox は当然選択する。

とは CSS Grid？

CSS Grid レイアウトは一種の二次元レイアウト系统。それ同時に処理する行と列，させるあなた精密に制御するグリッド结构中元素の位置と大小。Grid させるあなた定義する显式轨道、区域と放置规すなわち，用最も少のコード作成する複雑レイアウト。

Grid 专のためにページ级レイアウトと複雑コンポーネント结构そして設計する，でこれらのシナリオ中あなた必要とする制御する两个次元。それ引入た命名するGridエリア、auto-fill と auto-fit ならびに显式行列尺寸など概念，させる以前不可能のレイアウト变て簡単直接。

Grid 核心概念

• Grid コンテナ：適用するた display: grid の父元素。
• Grid 项目：Grid コンテナの直接子元素。
• Grid 轨道：由 grid-template-rows と grid-template-columns 定義するの行と列。
• Grid 线：形成する轨道边界のできない见线，に使用される放置。
• Grid 区域：项目可分配までのグリッド命名する区域。
• Gap：Gridトラック（行と列）の間の间距。

Grid 例：ページレイアウト

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page__header  { grid-area: header; }
.page__sidebar { grid-area: sidebar; }
.page__content { grid-area: content; }
.page__footer  { grid-area: footer; }

此ページレイアウト使用命名するGridエリア作成する经典のサイドバーレイアウト。页眉と页脚跨越两列，そしてサイドバーと内容かつ排放置。これ種類二次元结构正は Grid 真正出彩のに方。

Flexbox と Grid：並列比較

何时使用 Flexbox

時にあなたのレイアウト问题主には一次元の时候，Flexbox は正しくの選択する。もって下は最も一般的ですシナリオ：

1. ナビゲーションバーとメニュー

ナビゲーション本質的には一行（または一列）项目。Flexbox で项目の間分配空间，優雅に処理する溢出，かつさせる项目垂直配置变て簡単。gap 属性の代わりに代た旧のに基づく margin のメニュー项间距。

2. コンテンツの中央配置

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

この三行中央揃え解决方案は最も受喜愛するの Flexbox パターンの一つ。で Flexbox 出现前に，垂直中央揃え必要とする含む table-cell、絶対に定位加 transform または line-height 技巧の hack。Flexbox させる其变て毫不费力。

3. カードコンテンツの整列

時にカードあり見出し、説明すると操作するボタン，かつあなた希望するボタン常に固定で底部そして不管内容長さ时，Flexbox できる優雅に処理する：

.card {
  display: flex;
  flex-direction: column;
}

.card__content {
  flex: 1;
}

内容区域上の flex: 1 させる其成長もって填充利用可能空间，するボタン推までカード底部。にかかわらずカードを含むいくつ文本すべて有効。

4. フォーム行レイアウト

必要とするで一行中排列かつ可调全体大小の表単元素，如検索する入力欄と送信ボタン，非常に適合する Flexbox。入力欄できる成長もって填充利用可能空间，そしてボタン保持其当然大小。

5. メディアオブジェクト

经典のメディアオブジェクトパターン（左侧画像，右侧文本）は Flexbox の当然マッチする。画像保持其当然幅度，そして文本填充剩余空间。

何时使用 CSS Grid

時にあなたのレイアウト必要とする同時に制御する行と列，または必要とするで定義するの结构中精密に放置项目时，Grid は正しくの選択する。

1. 全ページレイアウト

带あり页眉、サイドバー、内容区域と页脚のページ级レイアウトは典型の Grid ユースケース。命名するGridエリアさせるレイアウト可読かつメンテナンス可能：

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "content sidebar"
      "footer  footer";
  }
}

注意するレスポンシブ断点どのように簡単に重新規定義するグリッドテンプレート。项目保持分配にそれ们のGridエリア，レイアウト自动重构。これ比で異なる断点处重新規排列 Flexbox コンテナする必要がある乾净て多。

2. カードグリッドとギャラリー

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

この単一声明作成するた一つのレスポンシブカードグリッド，に基づいて利用可能幅度自动调全体列数。毎张カード少なくとも 280px 幅しかしできる成長もって填充剩余空间。なし需媒体クエリする。これ種類带 minmax の auto-fill パターンは最も強力です Grid 技术の一つ。

3. ダッシュボードレイアウト

を持つ異なる大小、跨越多行多列の小部件ダッシュボード非常に適合する Grid。あなたできるするアイテム配置で特定のグリッド位置かつ跨越轨道：

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.widget--wide { grid-column: span 2; }
.widget--tall { grid-row: span 2; }
.widget--hero { grid-column: span 2; grid-row: span 2; }

4. 杂志とエディトリアルレイアウト

時に内容必要とする重なりまたは放置で非顺序位置时，Grid は唯一ネイティブサポート此機能の CSS レイアウト系统。あなたできるするアイテム配置で特定のGridライン上，作成するなし需絶対に定位の重なりコンポジット。

5. 聖杯レイアウト

著名の「圣杯」レイアウト（页眉、三列主体带固定幅度サイドバーと弹性中心、页脚）用 Grid 実装する軽そして易举：

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Flexbox と Grid の組み合わせ

最も効果的の方法いいえで Flexbox と Grid の間選択する，そしてはストラテジー性にコンポジットそれ们。一種の常见かつ推奨するのパターンは使用 Grid 処理するマクロレイアウト（ページ结构），Flexbox 処理するミクロレイアウト（コンポーネント内部）。

例：使用 Grid と Flexbox のダッシュボード

/* Grid for the page structure */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox for the header content */
.dashboard__header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Flexbox for sidebar menu items */
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

でこの例中，Grid 定義するた全体体ページ结构，そして Flexbox 処理する各部分的に内の配置。これ種類注目する点分離するさせるあなたの CSS あり条理かつ目的明確に。

レスポンシブデザインパターン

Flexbox レスポンシブパターン：改行

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex-shrink: 0;
}

Flexbox 改行非常に適合するタグリスト、芯片组と任意ので水平空间不十分な时当然ストリームへ下一行の项目集合。各项目保持其当然大小。

Grid レスポンシブパターン：自動入力

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

Grid auto-fill 作成するたなし需任意の媒体クエリするの真正レスポンシブグリッド。列数に基づいてコンテナ幅度自动调全体，毎列少なくとも 300px。これ比 Flexbox 改行より強力，なぜなら项目できる拉伸もって均匀填充行。

Grid レスポンシブパターン：スタック

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

よくある間違いと回避方法

• 正単行レイアウト使用 Grid：もしだけ必要とする一行または一列中の项目，Flexbox より簡単より適切。使用 display: grid 加単个 grid-template-columns 行通常は過度の工程化。
• 正二次元レイアウト使用 Flexbox：尝试用嵌套の flex コンテナ作成するGrid レイアウトできるをもたらす脆弱、難もって維持するのコード。に対して必要とする同時に制御する行と列の任意のレイアウト，使用 Grid。
• 忘れる gap：Flexbox と Grid すべて支持する gap 属性。用それの代わりに代 margin 来設定する项目间距。それだけ適用する于项目の間，不適用する于边缘，これ通常正はあなたしたいする必要があるの。
• 用 width オーバーライド flex-basis：で flex コンテナ中，flex-basis で主軸上优先于 width。同時に設定する两者かもしれないをもたらす意外行のために。使用 flex 简写来避ける混淆。
• 不使用 minmax：定義するグリッド列时，常に考慮する使用 minmax() 来防止する列变てあまりにも小またはあまりにも大。定義するのために 1fr の列できる縮小するまで零；minmax(200px, 1fr) 確保する最小幅度。
• 無視する隐式グリッド：時にあなたあり比定義するのGridトラックより多の项目时，Grid できる作成する隐式轨道。使用 grid-auto-rows と grid-auto-columns 来制御するこれらの隐式轨道の大小。

ブラウザサポート

Flexbox と Grid で 2026 年すべて享あり出色のブラウザサポート：

これ两種類技术ですべての主にブラウザ中已あり多年完全サポート。で现代 Web 開発する中ない理由因互換性问题そして避ける使用任意の一種の。Flexbox 中の gap 属性は最後に一つの獲得する通用支持するの主な機能，自 2021 年起已ですべてのブラウザ中利用可能。

クイック判断ガイド

時にあなた開始する一つの新規レイアウト时，问自己これらの问题：

• 私必要とする同時に制御する行と列か？は——Grid。いいえ——Flexbox。
• 内容すべき決定するレイアウト大小，それともレイアウトすべき決定する内容位置？コンテンツ主導——Flexbox。レイアウト主導——Grid。
• 项目必要とする当然改行か？は——Flexbox 加 flex-wrap または Grid 加 auto-fill。
• 私必要とする项目重なりか？は——Grid。
• これはより大レイアウト中のコンポーネントか？コンポーネントかもしれない用 Flexbox，より大レイアウト用 Grid。