ホーム＞ブログ＞ HP制作＞【初心者向け】CSSのFlexboxを完全マスター｜レイアウト設計がラクになる実践テクニック集

2026年4月17日 HP制作

【初心者向け】CSSのFlexboxを完全マスター｜レイアウト設計がラクになる実践テクニック集

「レイアウトが思い通りにならない」——CSS最大の挫折ポイント

HTML/CSSの学習で、最も多くの初学者が挫折するポイントが「レイアウト」です。要素を横並びにしたい、中央に配置したい、均等に幅を割り振りたい——頭の中では簡単なのに、CSSで実現しようとすると思い通りにいかない。

かつてはCSSのレイアウトに float や position を駆使する必要がありましたが、2026年現在、レイアウト設計の主役は完全に Flexbox と CSS Grid に置き換わっています。特にFlexboxは、あらゆるレイアウトの基本となる技術であり、これを理解すれば CSS のレイアウト問題の80%は解決できます。

この記事では、Flexboxの基本から実務で使うパターンまでを、実際のコード例とともに体系的に解説します。

この記事で分かること
Flexboxの基本概念（親要素と子要素の関係）
覚えるべき8つのプロパティ
実務で使う7つのレイアウトパターン
Flexbox vs CSS Grid の使い分け
レスポンシブデザインでのFlexbox活用法

Flexboxの基本概念——まずこれだけ理解する

「親（コンテナ）」と「子（アイテム）」の関係

Flexboxは、親要素（Flexコンテナ） に display: flex を指定することで有効化され、その 直接の子要素（Flexアイテム） の配置が制御されます。

/* 親要素に指定 → Flexbox有効化 */
.container {
  display: flex;
}

/* 子要素は自動的にFlexアイテムになる */
.item {
  /* 特に何も指定しなくても横並びになる */
}


  A
  B
  C

これだけで、子要素のA・B・Cは横並びになります。float も inline-block も不要。Flexboxの魅力は、このシンプルさにあります。

主軸（Main Axis）と交差軸（Cross Axis）

Flexboxを理解する上で最も重要な概念が「軸」です。

主軸（Main Axis）: Flexアイテムが並ぶ方向。デフォルトは「横方向（左→右）」
交差軸（Cross Axis）: 主軸と垂直な方向。デフォルトは「縦方向（上→下）」

この2つの軸を意識することで、Flexboxの全プロパティの動きが直感的に理解できます。

覚えるべき8つのプロパティ

親要素（コンテナ）に指定する5つ

① flex-direction — 並び方向の制御

.container {
  display: flex;
  flex-direction: row;            /* 横並び（デフォルト） */
  flex-direction: column;         /* 縦並び */
  flex-direction: row-reverse;    /* 横並び（右→左） */
  flex-direction: column-reverse; /* 縦並び（下→上） */
}

② justify-content — 主軸方向の配置

主軸方向（デフォルトでは横方向）のアイテムの配置を制御します。

.container {
  display: flex;
  justify-content: flex-start;    /* 左寄せ（デフォルト） */
  justify-content: center;        /* 中央揃え */
  justify-content: flex-end;      /* 右寄せ */
  justify-content: space-between; /* 両端揃え（均等配置） */
  justify-content: space-around;  /* 均等配置（端に余白あり） */
  justify-content: space-evenly;  /* 完全均等配置 */
}

justify-content: space-between は実務で最も頻繁に使うプロパティの一つです。ヘッダーでロゴとナビゲーションを左右に配置する、カードを均等に並べるなど、多くの場面で活躍します。
③ align-items — 交差軸方向の配置

交差軸方向（デフォルトでは縦方向）のアイテムの配置を制御します。

.container {
  display: flex;
  align-items: stretch;     /* 高さを揃える（デフォルト） */
  align-items: flex-start;  /* 上揃え */
  align-items: center;      /* 垂直中央揃え */
  align-items: flex-end;    /* 下揃え */
  align-items: baseline;    /* テキストのベースラインで揃える */
}

④ flex-wrap — 折り返し制御

.container {
  display: flex;
  flex-wrap: nowrap; /* 折り返さない（デフォルト） */
  flex-wrap: wrap;   /* 折り返す */
}

⑤ gap — アイテム間の余白

.container {
  display: flex;
  gap: 16px;         /* 全方向16pxの余白 */
  gap: 16px 24px;    /* 行方向16px、列方向24px */
}

💡 ポイント：gapはFlexboxに後から追加されたプロパティで、2026年現在は全主要ブラウザで対応済みです。以前はmarginでアイテム間の余白を制御していましたが、gapの方が「最初と最後のアイテムに余分なmarginがつかない」ため、圧倒的に使いやすいです。

子要素（アイテム）に指定する3つ

⑥ flex-grow — 余白の分配比率

.item-a { flex-grow: 1; } /* 余白を1の比率で取得 */
.item-b { flex-grow: 2; } /* 余白を2の比率で取得（Aの2倍の余白） */
.item-c { flex-grow: 1; } /* 余白を1の比率で取得 */

⑦ flex-shrink — 縮小比率

コンテナが狭くなった時に、アイテムがどの比率で縮むかを制御します。デフォルトは1（均等に縮む）。0を指定すると縮まなくなります。

⑧ flex-basis — 基本サイズ

アイテムの基本サイズ（flex-grow や flex-shrink が適用される前のサイズ）を指定します。

/* ショートハンド：flex: grow shrink basis */
.item {
  flex: 1 0 200px; /* 余白を均等に分配、縮まない、基本幅200px */
}

実務で使う7つのレイアウトパターン

パターン①：要素の上下左右中央配置（最頻出）

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

たった3行で完全な中央配置が実現します。ローディング画面、エラーページ、モーダルの中央配置に必須です。

パターン②：ヘッダーレイアウト（ロゴ＋ナビ）

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

パターン③：カードの横並び（折り返しあり）

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  flex: 1 1 300px; /* 最小300px、余白があれば均等に拡大 */
}

パターン④：サイドバー+メインコンテンツ

.layout {
  display: flex;
  gap: 32px;
}
.sidebar {
  flex: 0 0 280px; /* 固定幅280px */
}
.main {
  flex: 1; /* 残り全て */
}

パターン⑤：フッターを最下部に固定（Sticky Footer）

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* メインコンテンツが残り全てを占有 */
}
footer {
  /* 特に指定不要。コンテンツが少なくても最下部に表示される */
}

パターン⑥：要素の順序変更（レスポンシブ対応）

.item-a { order: 2; }
.item-b { order: 1; } /* Bが先に表示される */
.item-c { order: 3; }

パターン⑦：均等分割レイアウト

.container {
  display: flex;
}
.item {
  flex: 1; /* 全アイテムが均等幅 */
}

Flexbox vs CSS Grid の使い分け

基準	Flexbox	CSS Grid
得意な方向	1方向（横 or 縦）	2方向（横と縦を同時）
適するレイアウト	ナビ、ヘッダー、カード並び	ページ全体、ダッシュボード
アイテム数が動的	✅ 得意	△ 固定グリッドに合わせる必要
学習コスト	低い	やや高い
ブラウザ対応	完全対応	完全対応

💡 結論：迷ったらまずFlexboxを使ってください。Flexboxで実現できないレイアウト（2次元のグリッドなど）に出会ったら、そこで初めてCSS Gridを使えばOKです。実務では、Flexboxだけで対応できるケースが圧倒的に多いです。

レスポンシブデザインでのFlexbox活用

メディアクエリとの組み合わせ

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.item {
  flex: 1 1 300px; /* PC: 横並び、スマホ: 自動的に縦並び */
}

/* さらに細かく制御したい場合 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

flex: 1 1 300px と flex-wrap: wrap の組み合わせは、メディアクエリなしでレスポンシブを実現する最もエレガントな方法です。画面幅が300px×2＋gap以上あれば横並び、それ以下なら自動的に折り返して縦並びになります。

⚠️ よくあるバグ：flex-wrap: wrapを忘れると、アイテムがコンテナからはみ出して横スクロールが発生します。カード並びや商品一覧など、アイテム数が可変のレイアウトでは、必ずflex-wrap: wrapを指定してください。

まとめ：Flexbox は「CSS必修科目」の第1章

Flexboxは、現代のWeb制作において絶対に避けて通れない基本技術です。8つのプロパティを覚えるだけで、ほとんどのレイアウトが実現可能になります。

今日からのアクション：

今日：ブラウザのDevToolsで既存サイトのFlexboxレイアウトを観察する
今週：7つのパターンを実際にコーディングして手を動かす
今月：実案件でFlexboxを積極的に使い、float/inline-blockを卒業する

HP制作のご相談はこちら

CSSレイアウトの相談からサイト制作まで、お気軽にご相談ください。
「デザインは決まっているけどコーディングが分からない」という方も歓迎です。

無料で相談してみる →

この記事を書いた人：進藤優介｜株式会社Acqua 代表取締役飲食業界18年の実務経験を経て、Web制作・デジタルマーケティングの世界へ転身。2020年にAcquaを設立し、AI×Webの力で中小企業のビジネスを加速させることをミッションに、HP制作・LP制作からAI導入支援まで代表自らが伴走しています。