CSS Flexboxの基本 - レイアウトを自在に操る方法

Flexboxとは

Flexbox（Flexible Box Layout）は、CSSでレイアウトを作成するための強力なモジュールです。従来のfloatやpositionを使った方法と比べて、要素の配置を直感的に制御できます。

Flexboxが解決する主な問題：

• 垂直方向の中央揃え - 従来は難しかった縦方向の中央配置が簡単に
• 要素の均等配置 - スペースを自動で均等に分配
• 順序の変更 - HTMLを変更せずに表示順を変更
• 柔軟なサイズ調整 - 利用可能なスペースに応じて自動調整

基本的な使い方

Flexboxを使うには、親要素（コンテナ）にdisplay: flexを指定します。

.container {
  display: flex;
}

.item {
  /* 子要素は自動的にFlexアイテムになる */
}

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

コンテナのプロパティ

Flexコンテナには、子要素の配置を制御する様々なプロパティがあります。

flex-direction（並び方向）

子要素の並び方向を指定します。

.container {
  display: flex;
  flex-direction: row;          /* 横並び（デフォルト） */
  flex-direction: row-reverse;  /* 横並び（逆順） */
  flex-direction: column;       /* 縦並び */
  flex-direction: column-reverse; /* 縦並び（逆順） */
}

justify-content（主軸方向の配置）

主軸（flex-directionの方向）に沿った配置を指定します。

.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;
  height: 200px;
  align-items: stretch;     /* 伸縮して埋める（デフォルト） */
  align-items: flex-start;  /* 先頭揃え */
  align-items: flex-end;    /* 末尾揃え */
  align-items: center;      /* 中央揃え */
  align-items: baseline;    /* テキストのベースライン揃え */
}

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

flex-wrap（折り返し）

子要素が収まりきらない場合の折り返しを指定します。

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

gap（要素間の余白）

Flexアイテム間の余白を簡単に指定できます。

.container {
  display: flex;
  gap: 20px;           /* 上下左右に20pxの余白 */
  gap: 10px 20px;      /* 行間10px、列間20px */
  row-gap: 10px;       /* 行間のみ指定 */
  column-gap: 20px;    /* 列間のみ指定 */
}

アイテムのプロパティ

Flexアイテム（子要素）にも、個別に指定できるプロパティがあります。

flex-grow（伸び率）

余白がある場合に、どれだけ伸びるかを指定します。値が大きいほど多くのスペースを占めます。

.item-1 { flex-grow: 1; }  /* 1の割合で伸びる */
.item-2 { flex-grow: 2; }  /* 2の割合で伸びる（item-1の2倍） */
.item-3 { flex-grow: 1; }  /* 1の割合で伸びる */

flex-shrink（縮み率）

スペースが足りない場合に、どれだけ縮むかを指定します。

.item {
  flex-shrink: 0;  /* 縮まない（固定サイズを維持） */
  flex-shrink: 1;  /* 縮む（デフォルト） */
}

flex-basis（基本サイズ）

要素の初期サイズを指定します。widthやheightの代わりに使用できます。

.item {
  flex-basis: 200px;   /* 基本サイズを200pxに */
  flex-basis: 25%;     /* 親要素の25% */
  flex-basis: auto;    /* コンテンツに応じた自動サイズ */
}

flexショートハンド

flex-grow、flex-shrink、flex-basisをまとめて指定できます。

.item {
  flex: 1;           /* flex: 1 1 0% と同じ */
  flex: 0 0 auto;   /* 伸縮なし、自動サイズ */
  flex: 1 1 200px;  /* 200pxを基本に伸縮 */
}

align-self（個別の配置）

特定のアイテムだけ、交差軸方向の配置を変更できます。

.container {
  display: flex;
  align-items: flex-start;  /* 全体は上揃え */
}

.special-item {
  align-self: center;  /* このアイテムだけ中央 */
}

実践的なレイアウトパターン

パターン1: ヘッダーナビゲーション

ロゴを左に、ナビゲーションリンクを右に配置する典型的なパターン。

.header {
  display: flex;
  justify-content: space-between;  /* 両端に配置 */
  align-items: center;             /* 垂直中央 */
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;  /* リンク間の余白 */
}

パターン2: カードグリッド

均等に配置されるカードレイアウト。

.card-container {
  display: flex;
  flex-wrap: wrap;   /* 折り返しを許可 */
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px;   /* 最小300px、伸縮あり */
  max-width: 400px;  /* 最大幅を制限 */
}

パターン3: サイドバーレイアウト

固定幅のサイドバーと可変幅のメインコンテンツ。

.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;  /* 固定幅250px */
}

.main-content {
  flex: 1;           /* 残りのスペースを使う */
}

パターン4: フッターを画面下部に固定

コンテンツが少なくてもフッターを画面下部に表示。

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main {
  flex: 1;  /* メインコンテンツが残りを埋める */
}

.footer {
  /* 自動的に下部に配置される */
}

レスポンシブ対応

メディアクエリと組み合わせて、画面サイズに応じたレイアウト変更が簡単にできます。

.container {
  display: flex;
  flex-direction: column;  /* モバイル: 縦並び */
  gap: 1rem;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;  /* タブレット以上: 横並び */
    flex-wrap: wrap;
  }

  .item {
    flex: 1 1 45%;  /* 2列表示 */
  }
}

@media (min-width: 1024px) {
  .item {
    flex: 1 1 30%;  /* 3列表示 */
  }
}

Flexbox vs CSS Grid

まとめ

Flexboxをマスターすれば、CSSレイアウトの悩みの多くが解消されます。最初は覚えることが多く感じるかもしれませんが、基本的なプロパティを押さえれば、あとは組み合わせで対応できます。