CSS Flexbox入門｜中央揃えからレイアウトまで

CSSのFlexbox（フレキシブルボックスレイアウト）は、要素の並びや配置を柔軟にコントロールできるレイアウト手法です。中央揃えやナビゲーションバーの配置、カード型レイアウトなど、日常的に使うレイアウトのほとんどをシンプルなコードで実現できます。この記事では、Flexboxの基本から実践的なパターンまでを解説します。

Flexboxとは

Flexboxは、親要素（コンテナ）の中にある子要素（アイテム）を1方向に並べて配置するためのレイアウトモデルです。従来のfloatやinline-blockによるレイアウトと比べて、はるかに少ないコードで柔軟な配置ができます。

Flexboxを有効にする

Flexboxを使うには、親要素にdisplay: flexを指定するだけです。

.container {
  display: flex;
}

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

display: flexを指定すると、子要素はデフォルトで横方向（左から右）に並びます。これだけでブロック要素の縦積みが横並びに変わります。

コンテナとアイテムの関係

Flexboxでは、プロパティの指定先が「コンテナ（親）」と「アイテム（子）」に明確に分かれています。

• コンテナ用プロパティ: flex-direction、justify-content、align-itemsなど
• アイテム用プロパティ: flex-grow、flex-shrink、flex-basis、align-selfなど

この区別を意識すると、Flexboxの理解がスムーズになります。

並び方向を変える：flex-direction

flex-directionは、アイテムの並び方向（主軸）を指定するプロパティです。

横並びと縦並び

/* 横並び（デフォルト） */
.row {
  display: flex;
  flex-direction: row;
}

/* 縦並び */
.column {
  display: flex;
  flex-direction: column;
}

/* 横並び（逆順） */
.row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

主軸と交差軸

Flexboxには「主軸（main axis）」と「交差軸（cross axis）」という概念があります。

• flex-direction: rowのとき: 主軸は水平方向、交差軸は垂直方向
• flex-direction: columnのとき: 主軸は垂直方向、交差軸は水平方向

justify-contentは主軸方向、align-itemsは交差軸方向の配置を制御します。この関係が混乱しやすいポイントなので、覚えておきましょう。

主軸方向の配置：justify-content

justify-contentは、主軸方向のアイテムの配置を指定します。

代表的な値

.container {
  display: flex;
}

/* 左寄せ（デフォルト） */
.start { justify-content: flex-start; }

/* 右寄せ */
.end { justify-content: flex-end; }

/* 中央揃え */
.center { justify-content: center; }

/* 両端揃え（アイテム間に均等なスペース） */
.between { justify-content: space-between; }

/* 均等配置（アイテムの周囲に均等なスペース） */
.around { justify-content: space-around; }

/* 完全均等配置 */
.evenly { justify-content: space-evenly; }

ナビゲーションバーの例

space-betweenを使うと、ロゴとメニューを両端に配置するナビゲーションバーが簡単に作れます。

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #333;
  color: #fff;
}

<nav class="navbar">
  <div class="logo">サイト名</div>
  <ul class="menu">
    <li>ホーム</li>
    <li>記事一覧</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

交差軸方向の配置：align-items

align-itemsは、交差軸方向のアイテムの配置を指定します。

代表的な値

.container {
  display: flex;
  height: 200px;
}

/* 上揃え（デフォルト） */
.top { align-items: flex-start; }

/* 下揃え */
.bottom { align-items: flex-end; }

/* 中央揃え */
.middle { align-items: center; }

/* 高さを揃える（コンテナの高さいっぱいに伸ばす） */
.stretch { align-items: stretch; }

上下左右の中央揃え

Flexboxの最も有名な使い方の一つです。justify-content: centerとalign-items: centerを組み合わせるだけで、完璧な中央揃えが実現できます。

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 画面の高さいっぱい */
}

<div class="center-box">
  <p>この要素は画面の真ん中に表示されます</p>
</div>

従来のCSSでは上下中央揃えは難しい問題でしたが、Flexboxではこの3行で解決します。

アイテムの伸縮：flexプロパティ

flexプロパティを使うと、アイテムがコンテナ内でどのように伸縮するかを制御できます。

flex-growで余白を分配

.container {
  display: flex;
}

/* 3つのアイテムを等分配置 */
.item {
  flex-grow: 1;
}

/* 中央のアイテムだけ2倍の幅 */
.item-center {
  flex-grow: 2;
}

flex-grow: 1を指定すると、余っているスペースをアイテム間で均等に分配します。

flexショートハンド

flexプロパティは、flex-grow、flex-shrink、flex-basisのショートハンドです。

/* flex: grow shrink basis */
.item {
  flex: 1 1 0%;    /* 均等分割（よく使うパターン） */
}

.sidebar {
  flex: 0 0 250px; /* 固定幅250px、伸縮なし */
}

.main {
  flex: 1 1 0%;    /* 残りのスペースを全て使う */
}

サイドバーレイアウト

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 250px; /* 幅250pxで固定 */
  background-color: #f0f0f0;
}

.main-content {
  flex: 1; /* 残りの幅を全て使う */
  padding: 20px;
}

<div class="layout">
  <aside class="sidebar">サイドバー</aside>
  <main class="main-content">メインコンテンツ</main>
</div>

折り返しとレスポンシブ対応

デフォルトでは、Flexアイテムは1行に収まろうとして縮小されます。flex-wrapを使うと、収まりきらないアイテムを次の行に折り返せます。

flex-wrapの使い方

.container {
  display: flex;
  flex-wrap: wrap;     /* 折り返しを許可 */
  gap: 16px;           /* アイテム間の隙間 */
}

.card {
  flex: 0 1 calc(33.333% - 16px); /* 3列に並べる */
  min-width: 250px;                /* 最小幅を設定 */
}

min-widthを指定しておくと、画面幅が狭くなったときに自動的に列数が減り、レスポンシブなレイアウトになります。

gapプロパティ

gapはアイテム間の隙間を指定するプロパティです。従来はmarginで調整する必要がありましたが、gapを使うとはるかに簡潔に書けます。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;        /* 行方向・列方向ともに20px */
}

/* 行方向と列方向で異なる値を指定 */
.container-2 {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;    /* 行間 */
  column-gap: 16px; /* 列間 */
}

カード型レイアウトの実践例

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card {
  flex: 1 1 280px;  /* 最小280px、余白があれば伸びる */
  max-width: 400px; /* 最大幅を制限 */
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  color: #666;
}

<div class="card-list">
  <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>

まとめ

CSSのFlexboxについて、基本から実践的なレイアウトパターンまでを解説しました。

• display: flexで子要素を横並びにする
• flex-directionで並び方向を変更する
• justify-contentで主軸方向の配置を制御する
• align-itemsで交差軸方向の配置を制御する
• justify-content: centerとalign-items: centerで上下左右の中央揃えができる
• flexプロパティでアイテムの伸縮を制御する
• flex-wrapとgapでレスポンシブなカードレイアウトが作れる

Flexboxは1方向のレイアウトに向いています。行と列の両方を同時に制御したい場合は、CSS Gridの併用を検討してみてください。まずはこの記事のコード例をブラウザの開発者ツールで試して、各プロパティの効果を体感するのがおすすめです。