Bootstrap 5 のFlexユーティリティ活用術｜配置・整列を自在に操る

Bootstrap 5 のフレックス・アラインメントユーティリティとは？

Bootstrap 5 のフレックス・アラインメントユーティリティは、 CSS の Flexbox をクラス指定だけで直感的に扱える仕組みです。 display:flex や justify-content、align-items といった指定を CSSを書かずに実現できるため、レイアウト調整のスピードと保守性が大きく向上します。

本カテゴリでは、.d-flex を起点とした基本操作から、 実務で頻出する「中央寄せ」「左右寄せ」「等高化」「レスポンシブ切替」まで、 Bootstrap 5 の Flex ユーティリティを体系的に解説します。

.d-flex を起点にレイアウトを組み立てる

フレックスユーティリティの基本は .d-flex です。 これを指定するだけで要素は Flexbox コンテナとなり、 子要素の並び・揃え・間隔を柔軟に制御できるようになります。

.flex-row / .flex-column や、-md / -lg などのレスポンシブ指定を組み合わせることで、 モバイルでは縦並び、PCでは横並びといったUIも簡単に実装できます。

横方向・縦方向の揃えを一発で指定

Bootstrap 5 では、justify-content-* と align-items-* を ユーティリティクラスとして提供しています。 これにより、中央寄せ・端寄せ・均等配置といった指定を クラス1つで実現できます。

• justify-content-center / between / around / evenly
• align-items-start / center / end
• align-self-* による個別調整

よくある「中央に配置したい」「上下左右を揃えたい」といった要件に、 もっとも手早く対応できるのが Flex ユーティリティの強みです。

間隔・伸縮・並び順の制御

Flex ユーティリティでは、要素間の余白を .gap-* で安全に管理できます。 従来の margin 調整と違い、並び方向が変わっても崩れにくいのが特徴です。

また、.flex-grow-* / .flex-shrink-* を使えば、 要素の伸縮をコントロールでき、 .order-* によって画面サイズごとの表示順切替も可能です。

実務でよく使われるFlexレイアウト例

フレックス・アラインメントユーティリティは、 以下のようなUIで特に威力を発揮します。

• ヘッダー（ロゴ左・メニュー右・縦中央）
• ボタン群・アクションエリアの整列
• カード列の等高化・フッター下寄せ
• アイコン＋テキストの横並び
• ナビゲーション・パンくずの配置

グリッドとFlexの使い分け

Bootstrapでは、ページ全体の構造にはグリッド、 部品単位の配置調整にはFlexを使うのが基本的な考え方です。 両者を組み合わせることで、柔軟かつ保守性の高いレイアウトが実現できます。

本カテゴリでは、グリッドとFlexを併用する際の注意点や、 役割分担の考え方についても詳しく解説します。

このカテゴリで学べる内容

本カテゴリでは、Bootstrap 5 の Flex ユーティリティを 実務で使いこなすための知識を段階的に学べます。

• .d-flex を起点とした基本操作
• 横並び・縦並び・折返しの制御
• 中央寄せ・端寄せ・均等配置
• 余白（gap）と自動余白の活用
• 並び順・伸縮のレスポンシブ制御
• アクセシビリティを考慮した並び替え

Flexユーティリティを使うメリット

Flex ユーティリティを活用することで、 CSSを増やさずにレイアウト調整が可能になります。 クラスベースで意図が明確になるため、 チーム開発や保守フェーズでも扱いやすい点が大きな利点です。

本カテゴリの記事を順に読み進めることで、 Bootstrap 5 のフレックス・アラインメントを 自信を持って使いこなせるようになります。