CSS Flexboxで思い通りのレイアウトを ―
現場で本当に使うテクニック集

そもそもFlexboxとは何か

Flexbox、正式名称 CSS Flexible Box Layout は、要素を一方向（横または縦）に並べるためのレイアウトモデルです。2012年ごろから仕様が固まりはじめ、いまではほぼすべてのブラウザで完全にサポートされています。

Flexboxが登場する以前、私たちは float や display: inline-block を駆使してレイアウトを組んでいました。要素を横に並べるだけで clearfix が必要だったり、余白の計算が合わなかったり。思い返すと、なかなか大変な時代でした。

Flexboxの最大の特徴は、「親要素（コンテナ）にルールを書くだけで、子要素の並び方・サイズ・間隔を制御できる」という点です。この考え方を理解すると、レイアウトの組み方が根本的に変わります。

コンテナとアイテム ― 2つの役割

Flexboxを使うとき、まず覚えるべきは「Flexコンテナ」と「Flexアイテム」という2つの関係です。親要素に display: flex を指定した瞬間、その直下の子要素たちが自動的にFlexアイテムになります。

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.container {
  display: flex;
}

たったこれだけで、子要素A・B・Cが横一列に並びます。float も clearfix も不要。これがFlexboxのシンプルさです。

主軸と交差軸 ― Flexboxの「方向」を理解する

Flexboxを使いこなすうえで、絶対に避けて通れない概念があります。それが「主軸（Main Axis）」と「交差軸（Cross Axis）」です。

デフォルトでは、主軸は水平方向（左→右）、交差軸は垂直方向（上→下）です。flex-direction を変えると、この軸の方向が切り替わります。ここがFlexboxでつまずきやすいポイントでもあります。

大事なのは、justify-content は常に主軸方向の配置を、align-items は常に交差軸方向の配置を制御するということ。flex-direction: column に切り替えると、justify-content が縦方向、align-items が横方向の制御になります。

/* デフォルト：横並び */
.row {
  display: flex;
  flex-direction: row;     /* 主軸 → 水平 */
}

/* 縦並び */
.column {
  display: flex;
  flex-direction: column;  /* 主軸 → 垂直 */
}

完全中央揃え ― CSS史上最も簡潔なセンタリング

Flexbox以前、要素の上下左右中央揃えは開発者にとって長年の悩みでした。position: absolute と transform を組み合わせたり、テーブルセルを使ったり。いくつもの「ハック」が生まれては消えていきました。

Flexboxなら、たった3行です。

.center-box {
  display: flex;
  justify-content: center;  /* 主軸方向（横）の中央 */
  align-items: center;      /* 交差軸方向（縦）の中央 */
}

justify-content ― 主軸方向の配置バリエーション

justify-content は、Flexアイテムを主軸方向にどう配置するかを決めるプロパティです。実務では特に space-between と space-evenly の使い分けが重要になります。

.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; /* 完全均等配置 */
}

実務で最もよく使うのは space-between です。ナビゲーションのロゴとメニューを左右に分けたり、カードの中のテキストとボタンを上下に分けたり。「両端に押し付けて、間は自動で均等」という動きは、驚くほど多くの場面で活躍します。

flex-wrap と実務レイアウトパターン

デフォルトでは、Flexアイテムは1行に収まろうとして縮みます。これは flex-wrap: nowrap がデフォルト値だからです。カードレイアウトなど、折り返しが必要な場面では flex-wrap: wrap を指定します。

.card-grid {
  display: flex;
  gap: 16px;
  /* flex-wrap がないのでアイテムが縮む */
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 280px;  /* 最小280px、伸縮可能 */
}

ポイントは flex: 1 1 280px の書き方です。これは「伸びてもよい、縮んでもよい、基準サイズは280px」という意味で、280px未満になると折り返して次の行に移ります。メディアクエリなしでレスポンシブなカードグリッドが作れる、現場で非常に重宝するテクニックです。

ナビゲーションバーの典型パターン

ヘッダーのナビゲーションは、Flexboxが最も活躍する場面のひとつです。ロゴを左に、メニューを右に配置する定番のパターンは、justify-content: space-between 一行で実現できます。

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

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

flex-grow / flex-shrink / flex-basis を正しく理解する

Flexboxで最もつまずきやすいのが、flex-grow、flex-shrink、flex-basis の3つのプロパティです。これらはショートハンド flex でまとめて指定できます。

flex-grow は「余ったスペースをどれだけ受け取るか」、flex-shrink は「スペースが足りないときにどれだけ縮むか」、そして flex-basis は「計算の起点となるサイズ」です。

/* flex: [grow] [shrink] [basis] */

.item { flex: 0 1 auto; }  /* デフォルト：伸びない、縮む、自然なサイズ */
.item { flex: 1; }          /* = flex: 1 1 0%  余白を均等に吸収 */
.item { flex: none; }       /* = flex: 0 0 auto  伸びも縮みもしない */
.item { flex: 1 1 200px; } /* 200px基準で伸縮 */

サイドバー + メインコンテンツの定番レイアウト

flex-grow の実用的な使い方として、「固定幅のサイドバー + 可変幅のメインコンテンツ」というレイアウトがあります。サイドバーに flex: none を、メインに flex: 1 を指定するだけです。

.layout {
  display: flex;
  gap: 24px;
}

.sidebar {
  flex: none;       /* 伸縮しない */
  width: 260px;
}

.main {
  flex: 1;           /* 残りの幅をすべて使う */
}

order と align-self ― アイテム単位のコントロール

ここまでは親要素（コンテナ）側のプロパティを中心に見てきましたが、Flexboxには個々のアイテムに直接指定できるプロパティもあります。代表的なのが order と align-self です。

order はHTMLの記述順序を変えずに表示順序を変更するプロパティです。デフォルトはすべて 0 で、値が小さいほど前に表示されます。レスポンシブ対応で「モバイルだけ表示順を変えたい」といった場面で活躍します。

align-self は、交差軸方向の配置を特定のアイテムだけ上書きできるプロパティです。親の align-items が center でも、特定のアイテムだけ flex-end にする、といったことが可能です。