Flexboxレイアウト完全ガイド｜CSS初心者でもわかる実践テクニック

かつてCSSでレイアウトを組むにはfloatやpositionを駆使する必要があり、初心者には難解なコードが必要でした。Flexboxの登場により、複雑なレイアウトが直感的なプロパティで実現できるようになりました。本記事では、Flexboxの概念から実践的なパターンまでを体系的に学びましょう。

Flexboxとは？基本コンセプトを理解する

Flexbox（Flexible Box Layout）は、コンテナ内のアイテムを柔軟に配置するためのCSSレイアウトモジュールです。主軸（main axis）と交差軸（cross axis）という2つの軸の概念を理解することが最初のポイントです。

.container {
  display: flex;  /* これだけでFlexboxが有効になる */
}

display: flexを親要素に指定するだけで、直下の子要素（アイテム）が横並びになります。

コンテナに指定する主要プロパティ

flex-direction: 主軸の方向を決める

.container {
  display: flex;
  flex-direction: row;           /* デフォルト: 左から右 */
  /* flex-direction: row-reverse;    右から左 */
  /* flex-direction: column;         上から下 */
  /* flex-direction: column-reverse; 下から上 */
}

justify-content: 主軸方向の揃え方

最もよく使うプロパティの一つです。

.container {
  display: flex;
  justify-content: flex-start;   /* 左揃え（デフォルト） */
  justify-content: flex-end;     /* 右揃え */
  justify-content: center;       /* 中央揃え */
  justify-content: space-between; /* 両端+均等間隔 */
  justify-content: space-around;  /* 全周均等間隔 */
  justify-content: space-evenly;  /* 完全均等間隔 */
}

align-items: 交差軸方向の揃え方

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

flex-wrap: 折り返しの制御

.container {
  display: flex;
  flex-wrap: nowrap;   /* デフォルト: 折り返さない */
  flex-wrap: wrap;     /* 折り返す */
  flex-wrap: wrap-reverse; /* 逆方向に折り返す */
}

アイテムに指定する主要プロパティ

flex: 伸縮の割合を指定する

flexはflex-grow・flex-shrink・flex-basisのショートハンドです。

.item {
  flex: 1;       /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  flex: 2;       /* 他の flex:1 アイテムの2倍の幅を取る */
  flex: 0 0 200px; /* 固定幅200px */
}

align-self: 個別の交差軸揃え

.item-special {
  align-self: flex-end; /* このアイテムだけ下揃えにする */
}

実務でよく使う5パターン

パターン1: ナビゲーションバー

<nav class="navbar">
  <div class="logo">サイト名</div>
  <ul class="nav-links">
    <li>ホーム</li>
    <li>サービス</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
}
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

パターン2: カードの均等並び

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  flex: 0 0 calc(33.333% - 16px); /* 3列 */
}

パターン3: 完全中央揃え

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

パターン4: サイドバー付きレイアウト

.layout {
  display: flex;
  gap: 32px;
}
.main-content {
  flex: 1; /* 残りのスペースをすべて使う */
}
.sidebar {
  flex: 0 0 280px; /* 固定幅280px */
}

パターン5: フッターを常に下に固定

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1; /* mainが残りスペースを埋めてフッターを下に押し出す */
}

レスポンシブ対応: モバイルでは縦並びに変える

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  flex: 0 0 calc(33.333% - 16px);
}

/* タブレット: 2列 */
@media (max-width: 768px) {
  .card {
    flex: 0 0 calc(50% - 12px);
  }
}

/* スマートフォン: 1列 */
@media (max-width: 480px) {
  .card {
    flex: 0 0 100%;
  }
}

よくある躓きポイント

Q: flexを設定したのに子要素が横並びにならない
→ display: flexは直接の子要素にしか効きません。孫要素には別途指定が必要です。

Q: align-itemsで垂直中央にならない
→ コンテナにheightが指定されていないと中央揃えの基準がわかりません。heightまたはmin-heightを設定しましょう。

Q: flex: 1 を指定しても均等幅にならない
→ 子要素に固定のwidthが設定されていると優先されます。widthの指定を確認してください。

まとめ

Flexboxをマスターすれば、Webページのほとんどのレイアウトはシンプルなコードで実現できます。まずはdisplay: flex、justify-content、align-itemsの3つを手を動かして練習しましょう。この3つが使いこなせれば、実務レベルのレイアウトの大半に対応できます。