Bootstrapの.d-flex完全入門！display:flexを最短で理解する初心者ガイド
生徒
「Bootstrapで.d-flexってよく見かけるんですが、何をしているんですか？」
先生
「.d-flexは、HTMLの要素を横並びにしたり、整列しやすくするためのスイッチのようなものです。」
生徒
「スイッチ…ですか？」
先生
「はい。.d-flexを付けるだけで、レイアウトの考え方が一気に変わります。まずは基本から見ていきましょう。」
1. .d-flexとは何かを超シンプルに理解しよう
.d-flexは、Bootstrapに用意されているクラスで、display:flexというCSSの設定を一瞬で有効にします。displayは「表示方法」、flexは「並び方の仕組み」を意味します。
例えるなら、机の上に物を置くとき、普通は上から下に積み重なりますが、横にきれいに並べたいときがあります。その「横に並べる机」に切り替えるスイッチが.d-flexです。
難しく考えなくて大丈夫です。.d-flexを付けた瞬間、その中の要素は横並びが基本になります。
2. なぜBootstrapで.d-flexを使うのか
Bootstrapを使わずに横並びを作ろうとすると、CSSを自分で書く必要があります。初心者にとっては、どこに何を書くのか分からず混乱しやすいです。
.d-flexを使えば、HTMLにクラス名を追加するだけでレイアウトを変更できます。パソコン操作に慣れていない人でも、コピペで扱えるのが大きなメリットです。
Bootstrapのフレックス・アラインメントユーティリティは、失敗しにくく、画面サイズが変わっても崩れにくい設計になっています。
3. .d-flexを使った一番かんたんな例
<div class="d-flex">
<div class="p-2 border">りんご</div>
<div class="p-2 border">みかん</div>
<div class="p-2 border">バナナ</div>
</div>
この例では、3つの箱が横に並びます。.d-flexがなければ縦に並びますが、付けるだけで横並びになります。
この「付けるだけ」という感覚をまず覚えてください。
4. .d-flexが付く場所の考え方
.d-flexは、親になる要素に付けます。親とは「中に別のタグが入っている側」のことです。
段ボール箱の中に小箱を入れるイメージをしてください。段ボール箱が.d-flexを持つことで、中の小箱たちが横並びになります。
子どもの要素に.d-flexを付けても、横並びにはならないので注意が必要です。
<div class="d-flex">
<img src="/img/sample120-120.jpg" alt="画像1">
<img src="/img/sample120-120.jpg" alt="画像2">
</div>
5. .d-flexでレイアウトの考え方が変わる理由
.d-flexを使うと、「上から下に流れる」というHTMLの基本ルールから、「横方向を意識する」考え方に切り替わります。
これは、文字を書くノートが縦書きから横書きに変わるような感覚です。最初は違和感がありますが、慣れるととても整理しやすくなります。
Bootstrapでは、このフレックスの考え方を前提に多くの部品が作られています。
6. .d-flexと一緒によく使われる場面
.d-flexは、ナビゲーション、ボタンの並び、画像と文字の横並びなど、よく目にする場所で使われます。
たとえば「アイコン＋文字」を横に並べたいとき、.d-flexはとても相性が良いです。
<div class="d-flex align-items-center">
<i class="bi bi-star-fill me-2"></i>
<span>お気に入り</span>
</div>
7. .d-flexを使うときの初心者がつまずきやすい点
一番多いのは「思った通りに並ばない」という悩みです。その多くは、.d-flexを付ける場所が間違っています。
もう一つは、「勝手に横並びになるのが怖い」という不安です。しかし、これは意図した場所だけに.d-flexを付ければ問題ありません。
まずは小さな範囲で試して、動きを目で見て覚えることが大切です。
8. .d-flexはレイアウト学習の第一歩
.d-flexは、Bootstrapのフレックス・アラインメントユーティリティの入口です。ここを理解すると、画面作りが一気に楽になります。
難しい理屈を覚える必要はありません。「横に並べたいときは.d-flex」という感覚で十分です。
パソコン操作が苦手な人でも、見た目の変化を確認しながら学べるのが.d-flexの魅力です。
