Bootstrapで学ぶレスポンシブな並び方向の使い方完全ガイド！flex-rowとflex-columnを初心者向けにやさしく解説

レスポンシブな並び方向（.flex-row/.flex-column と -md/-lg 指定）の使い分け

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

生徒

「スマホだと縦並び、パソコンだと横並びにしたいんですが、Bootstrapでできますか？」

先生

「Bootstrapのフレックス・アラインメントユーティリティを使えば、画面サイズごとに並び方向を変えられます。」

生徒

「難しそうですが、パソコンを触ったことがなくても大丈夫ですか？」

先生

「大丈夫です。箱を横に置くか縦に置くか、という感覚で考えれば理解できます。」

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

Bootstrapのフレックスとは、要素の並び方を自由にコントロールできる仕組みです。要素とは、画面に表示される箱のようなものだと考えてください。文章、画像、ボタンなどはすべて箱として扱われます。

フレックスを使うと、「横に並べる」「縦に並べる」といった配置を、クラスを指定するだけで実現できます。CSSを一から書かなくてもよい点が、Bootstrap初心者にとって大きなメリットです。

2. flex-rowとflex-columnの基本的な違い

flex-rowは、箱を横方向に並べる指定です。左から右へ並ぶイメージになります。一方でflex-columnは、箱を縦方向に並べる指定です。上から下へ積み重なる形になります。

本棚に本を横に並べるか、積み重ねるかを想像すると分かりやすいです。これをクラス名として指定するだけで、並び方が変わります。


<div class="d-flex flex-row">
    <div class="p-2 bg-primary text-white">箱1</div>
    <div class="p-2 bg-secondary text-white">箱2</div>
    <div class="p-2 bg-success text-white">箱3</div>
</div>

ブラウザ表示

3. レスポンシブデザインとは何か

レスポンシブデザインとは、画面の大きさに応じて表示を変える考え方です。スマートフォン、タブレット、パソコンでは画面サイズが違うため、同じ並び方だと見づらくなることがあります。

Bootstrapでは、画面サイズごとに動きを変えるための仕組みが最初から用意されています。これにより、初心者でも簡単に見やすい画面を作れます。

4. -mdや-lgが表している意味

-mdや-lgは、画面サイズの境目を表しています。mdは中くらいの画面、lgは大きな画面を意味します。スマートフォンは小さい画面、パソコンは大きな画面という感覚で覚えて大丈夫です。

例えばflex-md-rowと書くと、「画面が中くらい以上のときは横並び」という指定になります。それより小さい画面では、指定しなければ縦並びになります。


<div class="d-flex flex-column flex-md-row">
    <div class="p-2 bg-warning">メニュー</div>
    <div class="p-2 bg-info">内容</div>
</div>

ブラウザ表示

5. スマホは縦、パソコンは横にする考え方

初心者におすすめなのは、「まずスマホで見やすく作る」考え方です。スマホは画面が縦に長いため、縦並びが基本になります。

そこから、画面が広くなったら横並びに変える、という順番で指定すると混乱しにくくなります。このときflex-columnとflex-lg-rowの組み合わせがよく使われます。


<div class="d-flex flex-column flex-lg-row">
    <div class="p-3 border">画像</div>
    <div class="p-3 border">説明文</div>
</div>

ブラウザ表示

6. よく使われる組み合わせパターン

実際のWebサイトでは、ナビゲーションメニューやカード一覧などでレスポンシブな並び方向が使われます。スマホでは一つずつ縦に表示し、パソコンでは横に並べると見やすくなります。

Bootstrapのフレックス・アラインメントユーティリティを使うことで、CSSをほとんど書かずにこれを実現できます。


<div class="d-flex flex-column flex-md-row gap-2">
    <div class="card p-2">カードA</div>
    <div class="card p-2">カードB</div>
    <div class="card p-2">カードC</div>
</div>

ブラウザ表示