Flexboxを使ったレイアウト完全ガイド

現代のウェブデザインに不可欠なFlexboxを、基礎から実践まで徹底解説します。

Flexboxは、複雑なレイアウトを効率的かつレスポンシブに作成するためのCSSの強力なモジュールです。この記事では、その基本的な概念から具体的なプロパティの使い方、よくある問題の解決策まで、網羅的にご紹介します。初心者の方でもすぐに実践できるよう、豊富なコード例とともに分かりやすく解説していきます。

05Flexboxの注意点とブラウザ対応

06まとめ：Flexboxで効率的なレイアウトを実現

Flexboxとは？その基本概念

Flexbox（Flexible Box Layout Module）は、CSS3で導入されたレイアウトモジュールで、特に一次元的なレイアウト（行または列）の設計に優れています。要素の配置、整列、順序などを非常に柔軟にコントロールできるため、現代のレスポンシブデザインにおいて不可欠なツールとなっています。

従来のCSSレイアウト手法（floatやpositionなど）では、複雑な配置や中央寄せ、均等配置などが困難であったり、多くのハックが必要になったりするケースが少なくありませんでした。Flexboxはこれらの課題をスマートに解決し、より直感的で効率的な開発を可能にします。

Flexboxの真髄は、アイテムの配置とサイズ調整を柔軟に行える点にあります。

FlexコンテナとFlexアイテム

Flexboxレイアウトを理解する上で、まず「Flexコンテナ」と「Flexアイテム」の2つの主要な概念を把握することが重要です。

Flexコンテナ（Flex Container）は、Flexboxレイアウトを適用する親要素のことです。この要素にdisplay: flex;またはdisplay: inline-flex;を設定することで、その直下の子要素がFlexアイテムとして扱われるようになります。

Flexアイテム（Flex Item）は、Flexコンテナの直下の子要素のことです。これらのアイテムは、Flexコンテナに設定されたプロパティに基づいて、配置やサイズが自動的に調整されます。

例として、ウェブサイトのナビゲーションバーを考えてみましょう。ナビゲーションバー全体をFlexコンテナとし、その中の各リンク（ホーム、サービス、お問い合わせなど）をFlexアイテムとすることで、横並びや均等配置が容易になります。

<div class="container">
  <div class="item">アイテム 1</div>
  <div class="item">アイテム 2</div>
  <div class="item">アイテム 3</div>
</div>

Flexコンテナのプロパティ

Flexコンテナに適用するプロパティは、Flexアイテム全体の配置や挙動を決定します。これらのプロパティを理解することで、意図したレイアウトを効率的に作成できます。

displayプロパティ

Flexboxレイアウトを有効にするには、親要素にdisplay: flex;またはdisplay: inline-flex;を設定します。

flexはブロックレベルのFlexコンテナを作成し、親要素が占める全ての幅を使用します。一方、inline-flexはインラインレベルのFlexコンテナを作成し、コンテンツの幅に合わせて表示されます。

.container {
  display: flex; /* または display: inline-flex; */
}

flex-directionプロパティ

Flexアイテムが配置される主軸の方向を定義します。これはFlexboxの最も基本的な概念である「主軸」と「交差軸」を決定します。

利用可能な値は以下の通りです。

row: アイテムを左から右へ（横方向）配置します。これが初期値です。
row-reverse: アイテムを右から左へ（横方向、逆順）配置します。
column: アイテムを上から下へ（縦方向）配置します。
column-reverse: アイテムを下から上へ（縦方向、逆順）配置します。

.container {
  display: flex;
  flex-direction: column; /* アイテムを縦方向に並べる */
}

flex-wrapプロパティ

FlexアイテムがFlexコンテナの幅（または高さ）を超えた場合に、折り返すかどうかを制御します。

nowrap: 折り返しません。アイテムは一行（一列）に収まるように縮小されます。これが初期値です。
wrap: 必要に応じてアイテムを複数行（複数列）に折り返します。
wrap-reverse: wrapと同様ですが、逆方向に折り返します。

例えば、写真ギャラリーで画面幅に応じて写真が自動的に並び替えられるようなレイアウトを作成する際に非常に役立ちます。

.container {
  display: flex;
  flex-wrap: wrap; /* アイテムが収まらない場合に折り返す */
}

justify-contentプロパティ

主軸方向におけるFlexアイテムの配置を定義します。主軸上の余白をどのように分配するかに影響します。

flex-start: 主軸の開始位置にアイテムを寄せます（初期値）。
flex-end: 主軸の終了位置にアイテムを寄せます。
center: 主軸の中央にアイテムを配置します。
space-between: 最初と最後のアイテムを端に配置し、残りの余白をアイテム間に均等に分配します。
space-around: 各アイテムの左右に均等な余白を配置します。アイテム間の余白はアイテムと端の余白の2倍になります。
space-evenly: 各アイテム間、およびアイテムと端の余白を全て均等に分配します。

特にアイテムの水平方向の中央寄せや均等配置に頻繁に利用されます。

.container {
  display: flex;
  justify-content: center; /* アイテムを中央寄せ */
}

align-itemsプロパティ

交差軸方向におけるFlexアイテムの配置を定義します。Flexアイテムが一行（一列）の場合に、交差軸上の余白をどのように分配するかに影響します。

stretch: アイテムを交差軸方向に引き伸ばし、コンテナの高さ（または幅）いっぱいにします（初期値）。
flex-start: 交差軸の開始位置にアイテムを寄せます。
flex-end: 交差軸の終了位置にアイテムを寄せます。
center: 交差軸の中央にアイテムを配置します。
baseline: アイテムのベースラインに合わせて配置します。

.container {
  display: flex;
  align-items: center; /* アイテムを垂直方向の中央寄せ */
}

align-contentプロパティ

Flexアイテムが複数行（複数列）に折り返された場合に、行（列）ごとの配置を定義します。justify-contentの交差軸版と考えると良いでしょう。

stretch: 行（列）を交差軸方向に引き伸ばし、利用可能なスペースいっぱいにします（初期値）。
flex-start: 行（列）を交差軸の開始位置に寄せます。
flex-end: 行（列）を交差軸の終了位置に寄せます。
center: 行（列）を交差軸の中央に配置します。
space-between: 最初と最後の行（列）を端に配置し、残りの余白を行（列）間に均等に分配します。
space-around: 各行（列）の上下（左右）に均等な余白を配置します。

このプロパティは、flex-wrap: wrap;が設定されている場合にのみ効果を発揮します。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* 複数行を垂直方向の中央に配置 */
}

Flexアイテムのプロパティ

Flexアイテムに適用するプロパティは、個々のアイテムのサイズ、順序、整列などを細かく制御します。これにより、コンテナ全体のレイアウトの中で、特定のアイテムだけ異なる挙動をさせることが可能になります。

orderプロパティ

Flexアイテムの視覚的な表示順序を変更します。HTMLのマークアップ順序とは異なる順序で表示させたい場合に便利です。デフォルト値は0です。

値は整数で指定し、数値が小さいほど先に表示されます。負の値も指定可能です。

このプロパティは、アクセシビリティの観点からHTMLのソースコード順序を保ちつつ、見た目のレイアウトを調整する際に特に重要です。

.item-special {
  order: 1; /* 他のアイテム（order: 0）よりも後に表示 */
}
.item-first {
  order: -1; /* 他のアイテムよりも先に表示 */
}

flex-growプロパティ

Flexコンテナ内に余ったスペースがある場合に、Flexアイテムがどれだけそのスペースを占有するかを定義します。デフォルト値は0で、アイテムは余白を占有しません。

値は比率で指定します。例えば、flex-grow: 1;と設定されたアイテムは、他のアイテムがflex-grow: 0;であれば、残りのスペースを全て占有します。複数のアイテムがflex-grow: 1;であれば、残りのスペースを均等に分け合います。

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; } /* Item 2 will take twice as much space as Item 1 */
.item-3 { flex-grow: 1; }

flex-shrinkプロパティ

Flexコンテナ内にスペースが不足している場合に、Flexアイテムがどれだけ縮小するかを定義します。デフォルト値は1で、アイテムは必要に応じて縮小します。

値は比率で指定します。flex-shrink: 0;と設定すると、アイテムは縮小しません。これは、特定のアイテムの最小幅を維持したい場合に特に有効です。

.item-important {
  flex-shrink: 0; /* このアイテムは縮小しない */
  min-width: 150px; /* 最小幅を保証 */
}

flex-basisプロパティ

Flexアイテムの初期サイズを定義します。これは、余ったスペースがFlexアイテムに分配される前、または不足したスペースがFlexアイテムから取り除かれる前のサイズです。デフォルト値はautoです。

flex-basisは、widthやheightプロパティと似ていますが、Flexboxの主軸の方向に応じて適用されます。

.item {
  flex-basis: 200px; /* 初期サイズを200pxに設定 */
}

flexショートハンドプロパティ

flex-grow、flex-shrink、flex-basisの3つのプロパティをまとめて指定できるショートハンドプロパティです。

一般的な値の組み合わせとしては、以下のようなものがあります。

flex: none;: flex: 0 0 auto; と同じ。アイテムは伸縮せず、コンテンツのサイズを保ちます。
flex: auto;: flex: 1 1 auto; と同じ。アイテムは伸縮し、コンテンツのサイズをベースに余白を分配します。
flex: initial;: flex: 0 1 auto; と同じ。アイテムは縮小しますが、拡大はしません。
flex: 1;: flex: 1 1 0%; と同じ。アイテムは伸縮し、初期サイズを0として均等にスペースを分配します。

flex: 1;は非常に頻繁に使用され、利用可能なスペースをアイテム間で均等に分配したい場合に便利です。

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% と同じ */
}

align-selfプロパティ

個々のFlexアイテムに対して、Flexコンテナのalign-itemsプロパティを上書きし、交差軸方向の整列を定義します。これにより、特定のアイテムだけ異なる配置にすることができます。

利用可能な値はalign-itemsと同じです。

.container {
  display: flex;
  align-items: center; /* 全てのアイテムを中央寄せ */
}
.item-special {
  align-self: flex-start; /* このアイテムのみ上端に配置 */
}

実践！Flexboxを使ったレイアウト例

ここからは、Flexboxを使って実際のウェブサイトでよく見られるレイアウトを作成する具体的な例を見ていきましょう。これらの例を通じて、Flexboxの強力さと柔軟性を実感できるはずです。

ナビゲーションバーの作成

ヘッダーによくある、ロゴと複数のメニュー項目を横並びに配置するレイアウトです。

<!-- HTML -->
<header class="navbar">
  <div class="logo">Kwonteki</div>
  <nav class="nav-menu">
    <a href="#">ホーム</a>
    <a href="#">サービス</a>
    <a href="#">ブログ</a>
    <a href="#">お問い合わせ</a>
  </nav>
</header>

<!-- CSS -->
.navbar {
  display: flex;
  justify-content: space-between; /* ロゴとメニューを両端に配置 */
  align-items: center; /* 垂直方向の中央揃え */
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #2944A6;
}

.nav-menu a {
  text-decoration: none;
  color: #495057;
  padding: 0 15px;
  font-size: 16px;
}
.nav-menu a:hover {
  color: #2944A6;
}

カード型レイアウト（グリッド風）

記事一覧や商品表示などでよく使われる、複数のカードを横並びに配置し、画面幅に応じて自動で折り返すレイアウトです。

<!-- HTML -->
<div class="card-grid">
  <div class="card">
    <h3>カードタイトル 1</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カードタイトル 2</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カードタイトル 3</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
  <div class="card">
    <h3>カードタイトル 4</h3>
    <p>カードの内容がここに入ります。</p>
  </div>
</div>

<!-- CSS -->
.card-grid {
  display: flex;
  flex-wrap: wrap; /* アイテムを折り返す */
  gap: 20px; /* アイテム間の余白 */
  padding: 20px;
}

.card {
  flex: 1 1 300px; /* 伸縮し、初期サイズ300px */
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

フッターの三分割レイアウト

ウェブサイトのフッターでよく見られる、情報ブロックを複数横並びに配置するレイアウトです。

関連記事
2026年版 不動産贈与の基礎知識
2026年版モバイルアプリ通知戦略
2026年版投資分析ツール解説