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

フレックスボックス（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