先生と生徒の会話形式で理解しよう

生徒

「フレックスボックスで、横に並べたボックスが画面から飛び出さないように複数行にしたいんですけど、どうしたらできますか？」

先生

「そのときは、flex-wrapというCSSプロパティを使うと、とても簡単に複数行レイアウトができますよ。」

生徒

「flex-wrapって初めて聞きました。どういう働きをしているんですか？」

先生

「では、flex-wrapがどんな役割を持っているのか、具体的な例を使いながら説明していきましょう。」

1. flex-wrapとは何かを理解しよう

flex-wrap（フレックスラップ）とは、フレックスボックスで要素を並べたとき、その要素が横幅に入り切らない場合に折り返して複数行にするかどうかを決めるためのCSSプロパティです。表示領域が狭いと、横方向に並んだ要素がはみ出してしまうことがあります。たとえば、商品一覧やギャラリー画像のように、数が多い要素をきれいに複数行に並べたい場面はとても多いです。

flex-wrapを使えば、要素の大きさをいちいち計算する必要がなく、画面サイズによって自然に折り返してくれるため、初心者でも扱いやすい柔軟なレイアウトを作ることができます。ウェブ制作では、画面の広さが違っても読みやすいページにしたいので、このプロパティは覚えておくと非常に役に立ちます。

2. flex-wrapの基本的な値を覚えよう

flex-wrapには主に三つの値があります。まずはそれぞれの意味を理解しましょう。

・nowrap（ノーラップ）：折り返さず、一行に詰め込む設定。初期値（デフォルト）。

・wrap（ラップ）：横幅に入らない場合、次の行に折り返して並べる。

・wrap-reverse（ラップリバース）：折り返すが、下ではなく上の行に積む動きになる。

初めて使う人は、まずwrapだけ覚えておけば大丈夫です。 wrapは、自然と「入り切らない分を下の行に移動させてきれいに整列させる」という動きをしてくれます。特に商品一覧や写真サムネイルなどでは必須ともいえる設定です。

3. wrapを使った複数行レイアウトの作り方

実際にwrapを使って複数行レイアウトを作る例を見てみましょう。主役となるのは親要素に指定するdisplay:flexとflex-wrap:wrapの二つです。子要素は並べたい大きさにしておけば、入り切らなくなったタイミングで自動的に折り返してくれます。


<style>
    .wrap-box {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .wrap-item {
        width: 100px;
        padding: 10px;
        background: #c1e8ff;
        border-radius: 6px;
        text-align: center;
    }
</style>

<div class="wrap-box">
    <div class="wrap-item">アイテム1</div>
    <div class="wrap-item">アイテム2</div>
    <div class="wrap-item">アイテム3</div>
    <div class="wrap-item">アイテム4</div>
    <div class="wrap-item">アイテム5</div>
</div>

ブラウザ表示

このように、wrapを指定するだけで、複数行の整ったレイアウトが完成します。ウェブ制作で頻繁に使う便利な仕組みなので、ぜひ手を動かして試してみてください。

4. nowrapとwrapの違いを比較して理解する

初心者が混乱しがちなポイントが、nowrapの挙動です。nowrapは折り返しをしないため、子要素が増えるほど横に伸び続けてしまい、画面からはみ出すことがあります。一方でwrapは狭い画面でも自動的に折り返して並べるので、見やすいレイアウトに仕上がります。この二つの違いを知っておくと、表示が崩れたときの原因がすぐに分かります。


<style>
    .nowrap-box {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .nowrap-item {
        width: 120px;
        padding: 10px;
        background: #ffdcdc;
        border-radius: 6px;
        text-align: center;
    }
</style>

<div class="nowrap-box">
    <div class="nowrap-item">ボックスA</div>
    <div class="nowrap-item">ボックスB</div>
    <div class="nowrap-item">ボックスC</div>
    <div class="nowrap-item">ボックスD</div>
    <div class="nowrap-item">ボックスE</div>
</div>

ブラウザ表示

この例ではnowrapを使っているため、要素が横方向に並び続けて画面外に飛び出してしまいます。 wrapと比較してみると、flex-wrapが何をしているのかが分かりやすくなるでしょう。

5. flex-wrapが活躍する場面をイメージしてみよう

flex-wrapが役立つ場面はとても多く、特に数の多いコンテンツを均等に並べたいときに最適です。たとえば、画像ギャラリー、ブログ記事一覧、カード型レイアウト、タグ一覧など、「数がいくつになるか分からない」「画面の幅で何個入るか変わる」といったケースがあります。こうした状況で、wrapを指定するだけで自然に複数行になり、整列された美しいレイアウトを作れます。

また、パソコンとスマートフォンでは画面の幅が大きく異なるため、横幅が狭いスマートフォンではwrapが特に効果を発揮します。ボックスがぎゅうぎゅうに詰まって読みにくくなるのを避けられ、閲覧者にとって使いやすいページに仕上がります。これにより、サイト全体がスッキリと読みやすくなり、必要な情報が見つけやすいレイアウトが実現します。

6. 初心者がつまずきやすいポイントと理解のコツ

flex-wrapはとても便利なプロパティですが、初心者がよくつまずくのが、「widthが大きすぎて思ったように折り返されない」という問題です。これは、子要素の幅が大きすぎて一行に入りきらない場合でも、CSSによって要素自体が縮められないことが原因です。そのため、wrapを使うときは適切な幅を設定することが重要です。

また、gapを使うことでボックス同士の空白を簡単に調整できるため、はじめて複数行レイアウトを作るときにも非常に扱いやすいです。自然な余白をつくることで見栄えがよくなり、全体的に整った印象を与えることができます。視覚的に美しいレイアウトにするためにも、flex-wrapとgapはセットで使うと覚えておくとよいでしょう。