【CSS】flexboxレイアウトの使い方を基本から解説｜Webの基礎

記事内には広告が含まれます

2026年7月18日

はじめに

「要素を横並びにしたいのに、思い通りにいかない」「中央揃えのやり方がいまいち分からない」という経験はありませんか？

これらの多くは、flexbox（フレックスボックス）を使うことで簡単に解決できます。

前回の記事では、CSSの基本となるボックスモデルについて解説しました。
今回は、そのボックスモデルを土台に要素を自在に並べるレイアウト手法「flexbox」について、仕組みからサンプルコードまでわかりやすく解説します。

flexboxとは？

flexboxは、要素を横並び・縦並びに配置し、間隔や揃え方を柔軟にコントロールできるCSSのレイアウト機能です。

正式名称は「Flexible Box Layout（フレキシブルボックスレイアウト）」で、以前主流だった float を使ったレイアウトに比べて、崩れにくく直感的にコードが書けるのが特徴です。

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

flexboxは、親要素（コンテナ）と子要素（アイテム）という2つの役割で構成されます。

役割	説明
flexコンテナ	`display: flex` を指定した親要素。子要素の並べ方を制御する
flexアイテム	flexコンテナの直下にある子要素。並べ方の指定を受け取る側

主軸（main axis）と交差軸（cross axis）

flexboxを理解するうえで欠かせないのが、主軸と交差軸という2つの軸の概念です。

軸	説明
主軸（main axis）	アイテムが並ぶ方向の軸。`flex-direction` で向きを変更できる
交差軸（cross axis）	主軸に対して垂直な軸

これから紹介する justify-content は「主軸方向」、align-items は「交差軸方向」の揃え方を指定するプロパティです。この対応関係を覚えておくと、混乱しにくくなります。

display: flex（コンテナ化）

flexboxを使うには、まず親要素に display: flex を指定します。

書式

.container {
    display: flex;
}

サンプル

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    display: flex;
}

display: flex を指定するだけで、子要素（.item）は自動的に横並びになります。float や display: inline-block のように、余白の調整に悩まされることもありません。

flex-direction（並べる方向）

flex-direction は、アイテムをどの方向に並べるかを指定します。

書式

.container {
    display: flex;
    flex-direction: 値;
}

主な値

値	説明
`row`（初期値）	横並び（左から右）
`row-reverse`	横並び（右から左）
`column`	縦並び（上から下）
`column-reverse`	縦並び（下から上）

サンプル

/* スマホでは縦並びに切り替える */
.container {
    display: flex;
    flex-direction: column;
}

/* PCでは横並びに */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

flex-direction: column にすると、主軸が縦方向に切り替わります。その結果、justify-content と align-items の役割も上下・左右が入れ替わる点に注意する必要があります。してください。

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

justify-content は、主軸方向（初期状態では横方向）のアイテムの配置を指定します。

書式

.container {
    display: flex;
    justify-content: 値;
}

主な値

値	説明
`flex-start`（初期値）	主軸の始点に寄せる
`flex-end`	主軸の終点に寄せる
`center`	中央に寄せる
`space-between`	両端に寄せ、間隔を均等にする
`space-around`	各アイテムの周囲に均等な余白を作る
`space-evenly`	アイテム間・両端の余白をすべて均等にする

サンプル

/* ナビゲーションメニューを均等配置 */
.nav-list {
    display: flex;
    justify-content: space-between;
}

/* ボタンを中央揃え */
.button-area {
    display: flex;
    justify-content: center;
}

align-items（交差軸方向の配置）

align-items は、交差軸方向（初期状態では縦方向）のアイテムの配置を指定します。

書式

.container {
    display: flex;
    align-items: 値;
}

主な値

値	説明
`stretch`（初期値）	交差軸方向いっぱいに引き伸ばす
`flex-start`	交差軸の始点に寄せる
`flex-end`	交差軸の終点に寄せる
`center`	中央に寄せる
`baseline`	テキストのベースラインを揃える

サンプル

/* 高さの異なる要素を上下中央に揃える */
.card-list {
    display: flex;
    align-items: center;
}

完全中央揃えのコツ
justify-content: center; と align-items: center; を同時に指定すると、要素を縦横どちらも中央に配置できます。モーダルやローディング表示の中央揃えでよく使われるテクニックです。

flex-wrap（折り返し）

flex-wrap は、アイテムがコンテナの幅に収まらないときに折り返すかどうかを指定します。

書式

.container {
    display: flex;
    flex-wrap: 値;
}

主な値

値	説明
`nowrap`（初期値）	折り返さず、1行に収めようとする（はみ出す・縮む）
`wrap`	収まらない場合は次の行に折り返す
`wrap-reverse`	折り返しつつ、逆方向に並べる

サンプル

/* カードを横並びにし、収まらない分は折り返す */
.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.card {
    width: 300px;
}

flex-wrap を指定しない場合、初期値は nowrap です。アイテムの合計幅がコンテナからはみ出すと、意図せず要素が縮んだり、横スクロールが発生したりすることがあります。

gap（要素間の余白）

gap は、flexアイテム同士の間隔を指定します。

以前は margin を使ってアイテム間の余白を作るのが一般的でしたが、gap を使うと両端に余分な余白ができず、シンプルに書けます。

書式

.container {
    display: flex;
    gap: 値;                 /* 縦横共通 */
    gap: 縦の値 横の値;         /* 縦横を個別に指定 */
}

サンプル

/* アイテム間に24pxの余白 */
.container {
    display: flex;
    gap: 24px;
}

/* 縦16px・横24pxで個別指定 */
.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

flex-grow / flex-shrink / flex-basis（アイテムの伸縮）

ここまでは主にコンテナ側のプロパティでしたが、ここからはアイテム側に指定するプロパティです。

書式

.item {
    flex-grow: 値;    /* 余った幅をどれだけ伸びるか（初期値 0） */
    flex-shrink: 値;  /* 足りない幅をどれだけ縮むか（初期値 1） */
    flex-basis: 値;   /* アイテムの基準となる幅（初期値 auto） */
}

/* 上記3つをまとめて指定するショートハンド */
.item {
    flex: 伸び 縮み 基準幅;
}

サンプル

/* サイドバーは幅固定、メインエリアは余った幅いっぱいに広がる */
.sidebar {
    flex: 0 0 240px; /* 伸びない・縮まない・幅240px固定 */
}

.main {
    flex: 1 1 auto;   /* 余った幅いっぱいに広がる */
}

/* 3カラムを均等に分割する */
.column {
    flex: 1;  /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% と同じ意味 */
}

flex: 1; は非常によく使われる書き方です。複数のアイテムに同じ値を指定すると、コンテナの幅を均等に分け合ってくれます。

align-self（個別アイテムの配置上書き）

align-self は、align-items で指定した交差軸方向の配置を、特定のアイテムだけ個別に上書きしたいときに使います。

書式

.item {
    align-self: 値; /* flex-start / flex-end / center / stretch / baseline */
}

サンプル

.container {
    display: flex;
    align-items: center; /* 基本は中央揃え */
}

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

サンプル（ナビゲーションメニューのレイアウト）

flexboxのプロパティを組み合わせた、実用的なナビゲーションメニューのサンプルです。

HTML

<header class="header">
    <div class="logo">Site Logo</div>
    <nav class="nav">
        <ul class="nav-list">
            <li><a href="#">ホーム</a></li>
            <li><a href="#">ブログ</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

CSS

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ヘッダー全体：ロゴとメニューを両端に配置 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #ddd;
}

/* メニュー：横並び＋等間隔 */
.nav-list {
    display: flex;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-list a {
    text-decoration: none;
    color: #333;
}

/* 画面が狭いときは縦並びに切り替え */
@media (max-width: 600px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}