Bootstrap フレックスの折返し制御を完全解説！.flex-wrap/.flex-nowrapで行崩れと均等配置を最適化

折返し制御（.flex-wrap/.flex-nowrap）で行崩れと均等配置を最適化

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

生徒

「Bootstrapで横に並べた要素が、画面を小さくすると崩れてしまいます…」

先生

「それはフレックスの折返し制御が原因かもしれません。」

生徒

「折返し制御って何ですか？難しそうです…」

先生

「大丈夫です。横並びの荷物を棚に置くイメージで考えると、とても簡単ですよ。」

1. Bootstrapのフレックスとは何かを超やさしく説明

Bootstrapのフレックスとは、要素を横や縦に並べるための仕組みです。専門的にはCSSのFlexboxという仕組みを使っていますが、Bootstrapではclassを指定するだけで簡単に使えます。たとえば、写真やボタンを横一列に並べたいときによく使われます。

パソコンの画面は大きさが人によって違います。そのため、並べた要素が画面に収まりきらないことがあります。そこで重要になるのが「折返し制御」です。

2. 折返し制御とは？棚に荷物を置く例えで理解

折返し制御とは、横に並べた要素が入りきらないときに、次の行に回すかどうかを決めるルールです。棚に本を並べていて、入りきらなければ次の段に置くか、無理やり押し込むか、その違いを想像してください。

Bootstrapでは、折り返す場合は.flex-wrap、折り返さない場合は.flex-nowrapを使います。これを指定するだけで、画面が小さくなったときの行崩れを防ぐことができます。

3. .flex-wrapの基本的な使い方

.flex-wrapは、要素が横に入りきらなくなったら自動で次の行に折り返します。スマートフォン表示でも見やすくなるため、初心者の方にはまずこちらがおすすめです。


<div class="d-flex flex-wrap">
    <div class="p-2 border">ボックス1</div>
    <div class="p-2 border">ボックス2</div>
    <div class="p-2 border">ボックス3</div>
    <div class="p-2 border">ボックス4</div>
</div>

ブラウザ表示

画面幅が狭くなると、ボックスが自然に次の行へ移動します。これにより、文字や画像が重なってしまう失敗を防げます。

4. .flex-nowrapであえて折り返さない理由

.flex-nowrapは、どんなに画面が狭くなっても折り返しません。すべての要素を一列に並べ続けます。これは、横スクロールさせたいメニューなどで使われます。


<div class="d-flex flex-nowrap overflow-auto">
    <div class="p-2 border">メニューA</div>
    <div class="p-2 border">メニューB</div>
    <div class="p-2 border">メニューC</div>
    <div class="p-2 border">メニューD</div>
</div>

ブラウザ表示

このように横に流れるメニューを作るとき、.flex-nowrapはとても役立ちます。

5. 折返しと均等配置を組み合わせる考え方

折返し制御と一緒によく使われるのが「均等配置」です。均等配置とは、要素同士の間隔を同じにすることです。Bootstrapではjustify-content系のclassと組み合わせます。


<div class="d-flex flex-wrap justify-content-between">
    <div class="p-2 border">商品1</div>
    <div class="p-2 border">商品2</div>
    <div class="p-2 border">商品3</div>
</div>

ブラウザ表示

折り返しながら、きれいに間隔を保つことで、ショップサイトのような見た目になります。

6. 画像レイアウトでの折返し制御の活用

画像を並べる場面でも.flex-wrapは大活躍します。特にスマートフォンでは、画像が自動で下に回り、見やすさが大きく向上します。


<div class="d-flex flex-wrap">
    <img src="/img/sample150-100.jpg" class="m-1" alt="サンプル画像">
    <img src="/img/sample150-100.jpg" class="m-1" alt="サンプル画像">
    <img src="/img/sample150-100.jpg" class="m-1" alt="サンプル画像">
</div>

ブラウザ表示

画像が自動で折り返されることで、レイアウト崩れを防止できます。