フレックスボックス（Flexbox）完全ガイド【図解付き】

2025.08.14

フレックスボックス（Flexbox）完全ガイド【図解付き】

フレックスボックス（Flexbox）完全ガイド【図解付き・全プロパティ一覧】

1. はじめに

Flexbox（フレックスボックス）は、CSSで要素を柔軟に配置・整列させるための強力なレイアウトモジュールです。従来のfloatやinline-blockでは難しかった縦横の中央寄せや均等配置が、シンプルなプロパティ指定で実現できます。

2. 基本の使い方

CSS
.container {
    display: flex;
}

親要素に display: flex; を指定するだけで、子要素が横並びになります。

3. 主軸（Main Axis）と交差軸（Cross Axis）

Flexboxは主軸（main axis）と交差軸（cross axis）の概念で動きます。

  • 主軸（main axis）：flex-directionで決まる方向
  • 交差軸（cross axis）：主軸に直交する方向
CSS
.container {
    display: flex;
    flex-direction: row; /* 横並び（初期値） */
    /* flex-direction: column; 縦並び */
}

4. 要素の配置を制御するプロパティ

水平方向（主軸）

CSS
.container {
    justify-content: flex-start; /* 左寄せ（初期値） */
    /* center, flex-end, space-between, space-around, space-evenly */
}

垂直方向（交差軸）

CSS
.container {
    align-items: stretch; /* 高さを揃える（初期値） */
    /* flex-start, center, flex-end, baseline */
}

5. 複数行の配置（折り返し）

CSS
.container {
    flex-wrap: wrap; /* 折り返す */
    /* nowrap（初期値）, wrap-reverse */
}

6. 子要素ごとの柔軟な伸縮

CSS
.item {
    flex: 1; /* 均等幅 */
}
.item.large {
    flex: 2; /* 他の2倍の幅 */
}

7. 実践例：中央寄せレイアウト

HTML
<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>
CSS
.container {
    display: flex;
    justify-content: center; /* 水平方向中央 */
    align-items: center; /* 垂直方向中央 */
    height: 100vh;
}
.item {
    background: #3498db;
    color: #fff;
    padding: 20px;
    margin: 10px;
}

8. 図解のポイント

  • 主軸（row）：左から右へ流れる線
  • 交差軸：上から下へ流れる線
  • justify-content → 主軸方向の配置
  • align-items → 交差軸方向の配置

9. Flexbox全プロパティ一覧

プロパティ対象説明主な値
display親Flexコンテナを有効化flex / inline-flex
flex-direction親主軸の方向を決定row / row-reverse / column / column-reverse
flex-wrap親折り返し設定nowrap / wrap / wrap-reverse
flex-flow親flex-directionとflex-wrapのショートハンド例: row wrap
justify-content親主軸方向の配置flex-start / flex-end / center / space-between / space-around / space-evenly
align-items親交差軸方向の配置（1行）stretch / flex-start / flex-end / center / baseline
align-content親交差軸方向の配置（複数行）stretch / flex-start / flex-end / center / space-between / space-around
gap親子要素間の間隔px / em / rem など
order子表示順序を変更数値（初期値: 0）
flex-grow子余白の伸び率数値（初期値: 0）
flex-shrink子縮小率数値（初期値: 1）
flex-basis子初期幅（伸縮前）auto / px / % など
flex子flex-grow / flex-shrink / flex-basis のショートハンド例: 1 1 auto
align-self子特定の子要素だけ交差軸方向の配置を変更auto / flex-start / flex-end / center / baseline / stretch

10. まとめ

Flexboxは、Webレイアウトの基本スキルの一つです。プロパティを体系的に覚えることで、複雑なデザインも短いコードで実現可能になります。レスポンシブデザインやgap、orderなどを活用すれば、さらに表現の幅が広がります。

関連記事

PAGE TOP