Bootstrapのフレックス配置を完全解説！中央・端・均等配置を一発指定で理解しよう

中央・端・均等配置を一発指定：.justify-content-center/between/around/evenly

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

生徒

「Bootstrapでボタンを横に並べたんですけど、真ん中にそろわなくて困っています…」

先生

「それなら、フレックスの配置を指定するクラスを使うと、一発で解決できますよ。」

生徒

「フレックスって聞いたことはありますけど、難しそうです…」

先生

「大丈夫です。並び方を指示するだけなので、感覚的に覚えられます。」

1. Bootstrapのフレックス配置とは何か

Bootstrapのフレックス配置とは、横や縦に並んだ要素の位置を簡単にそろえるための仕組みです。難しい計算や細かい設定をしなくても、クラス名を指定するだけで、中央寄せや端寄せができます。机の上に本を並べて、真ん中に集めたり、端にそろえたりするイメージをすると分かりやすいです。

2. justify-content-centerで中央に配置する

中央に配置したいときは、justify-content-centerを使います。これは横方向の真ん中に要素を集める指定です。写真やボタンを中央に置きたいときによく使われます。


<div class="d-flex justify-content-center">
    <img src="/img/sample120-120.jpg" alt="">
    <img src="/img/sample120-120.jpg" alt="">
</div>

ブラウザ表示

3. justify-content-betweenで端と端に配置する

左右の端に要素を分けて配置したい場合は、justify-content-betweenを使います。これは最初の要素を左端、最後の要素を右端に置き、間を大きく空ける配置です。ヘッダーのロゴとメニューによく使われます。


<div class="d-flex justify-content-between">
    <div class="p-2 bg-light">左</div>
    <div class="p-2 bg-light">右</div>
</div>

ブラウザ表示

4. justify-content-aroundで周りに余白をつける

justify-content-aroundは、各要素の周りに同じくらいの余白をつけて配置します。人が円になって立つようなイメージで、要素同士が少し離れます。見た目にゆったりした配置になります。


<div class="d-flex justify-content-around">
    <img src="/img/sample150-100.jpg" alt="">
    <img src="/img/sample150-100.jpg" alt="">
    <img src="/img/sample150-100.jpg" alt="">
</div>

ブラウザ表示

5. justify-content-evenlyで均等に配置する

justify-content-evenlyは、すべての間隔を完全に同じ幅で配置します。定規で測ったようにきれいにそろうので、カードやアイコンを整然と並べたいときに便利です。


<div class="d-flex justify-content-evenly">
    <div class="p-2 bg-secondary text-white">A</div>
    <div class="p-2 bg-secondary text-white">B</div>
    <div class="p-2 bg-secondary text-white">C</div>
</div>

ブラウザ表示