「flexbox」と「grid」の使い分け

このページの目的

CSSのモダンなレイアウト手法である「Flexbox」と「Grid」。どちらも非常に強力ですが、「どんな時に、どちらを使うべきか」という使い分けに迷うことがよくあります。
このページでは、それぞれの得意なことを理解し、場面に応じて最適なツールを選択できるようになることを目指します。

---

compare_arrows根本的な違い：一次元か、二次元か

Flexbox（一次元）

一つの軸（行または列）に沿って要素を配置するのが得意です。「横並びのナビゲーションメニュー」や「カード内の要素の縦揃え」など、一方向のレイアウト作成に非常に向いています。

Grid（二次元）

行と列の二次元（格子状）のレイアウトを同時に制御するのが得意です。「サイト全体の大きな骨格」や「タイル状のギャラリー」など、複雑なレイアウトを組む際に真価を発揮します。

---

rule使い分けの指針

どちらを使うか迷ったら、以下の基準で考えてみましょう。

Flexboxが向いているケース

「コンテンツの量や長さに応じて、柔軟に伸び縮みしてほしい」レイアウトに向いています。

• ナビゲーションメニューの項目
• ヘッダー内のロゴとメニューとボタンの配置
• カード内の画像・タイトル・本文の縦方向の配置
• ボタン内のアイコンとテキストの整列

/* ヘッダーレイアウトの例 */
.header {
  display: flex;
  justify-content: space-between; /* 両端に配置 */
  align-items: center;          /* 上下中央揃え */
}

Gridが向いているケース

「行と列で構成された、かっちりとしたグリッドに要素をはめ込みたい」レイアウトに向いています。

• サイト全体のヘッダー、メイン、サイドバー、フッターの配置
• 写真やブログ記事のカードをタイル状に並べるギャラリー
• カレンダーのような、厳密な行列が必要なレイアウト

/* 2カラムレイアウトの例 */
.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px; /* メイン(可変) + サイドバー(固定) */
  gap: 20px;
}

---

FlexboxとGridの組み合わせ

実際のWeb制作では、どちらか一方だけを使うのではなく、両方を組み合わせて使うのが一般的です。

例えば、以下のように使い分けます。

1. まず、Gridでサイト全体の大きな枠組み（ヘッダー、メイン、フッターなど）を作ります。
2. 次に、その枠組みの中にあるヘッダー内で、ロゴとナビゲーションメニューを横並びにするためにFlexboxを使います。
3. さらに、メインエリアに配置したカードの中で、画像とテキストを整列させるために、またFlexboxを使います。

このように、「大きな骨格はGrid、中の細かい部品の整列はFlexbox」と役割分担するのが、モダンなCSSレイアウトの基本形です。

---

---