Bootstrap5 フレックス

Utilities: Flex

Bootstrap 5 の Flex ユーティリティを使用すると、グリッドカラム、ナビゲーション、コンポーネントなどのレイアウト、配置、サイズ変更を、レスポンシブな flexbox ユーティリティの完全なスイートで迅速に管理できます。より複雑な実装の場合は、カスタム CSS が必要な場合があります。

Flex 動作を有効にする

.d-flex クラスと .d-inline-flex クラスを使用して、flex レイアウトを有効にする方法を紹介します。

.d-flex: 要素をブロックレベルの flex コンテナとして設定します。
.d-inline-flex: 要素を行内レベルの flex コンテナとして設定します。

<div class="d-flex">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

方向

.flex-row、.flex-row-reverse、.flex-column、.flex-column-reverse クラスを使用して、flex アイテムの配置方向を制御する方法を紹介します。

クラス	説明
`.flex-row`	デフォルト値。アイテムを左から右に配置します。
`.flex-row-reverse`	アイテムを右から左に配置します。
`.flex-column`	アイテムを上から下に配置します。
`.flex-column-reverse`	アイテムを下から上に配置します。

<div class="d-flex flex-row">
  <!-- アイテムは左から右に配置されます -->
</div>

<div class="d-flex flex-column">
  <!-- アイテムは上から下に配置されます -->
</div>

Justify content

.justify-content-* クラスを使用して、flex アイテムの主軸上での配置方法を制御する方法を紹介します。

クラス	説明
`.justify-content-start`	デフォルト値。アイテムをコンテナの先頭に合わせます。
`.justify-content-end`	アイテムをコンテナの末尾に合わせます。
`.justify-content-center`	アイテムをコンテナの中央に配置します。
`.justify-content-between`	アイテムをコンテナ内で均等に分散し、最初のアイテムをコンテナの先頭に、最後のアイテムをコンテナの末尾に合わせます。
`.justify-content-around`	アイテムをコンテナ内で均等に分散し、各アイテムと隣接するアイテムの間隔を等しくします。
`.justify-content-evenly`	アイテムをコンテナ内で均等に分散し、各アイテムと隣接するアイテムの間隔、およびアイテムとコンテナの端との間隔をすべて等しくします。

<div class="d-flex justify-content-center">
  <!-- アイテムは中央に配置されます -->
</div>

<div class="d-flex justify-content-between">
  <!-- アイテムは均等に分散されます -->
</div>

Align items

.align-items-* クラスを使用して、flex アイテムのクロス軸上での配置方法を制御する方法を紹介します。

クラス	説明
`.align-items-start`	アイテムをコンテナの上部に合わせます。
`.align-items-end`	アイテムをコンテナの下部に合わせます。
`.align-items-center`	アイテムをコンテナ内で垂直方向の中央に配置します。
`.align-items-baseline`	アイテムのベースラインを揃えます。
`.align-items-stretch`	デフォルト値。アイテムをストレッチしてコンテナの高さに合わせます。

<div class="d-flex align-items-center">
  <!-- アイテムは垂直方向の中央に配置されます -->
</div>

<div class="d-flex align-items-end">
  <!-- アイテムは下部に配置されます -->
</div>

Align self

.align-self-* クラスを使用して、個々の flex アイテムのデフォルトの配置方法をオーバーライドする方法を紹介します。 .align-self-* クラスは、.align-items-* クラスと同じ値を取ります。

<div class="d-flex align-items-center">
  <div class="p-2">Item 1</div>
  <div class="p-2 align-self-start">Item 2</div>
  <div class="p-2">Item 3</div>
</div>

Fill

.flex-fill クラスを使用して、flex アイテムに残りのスペースを埋めさせる方法を紹介します。

<div class="d-flex">
  <div class="p-2">Item 1</div>
  <div class="p-2 flex-fill">Item 2</div>
</div>

Grow and shrink

.flex-grow-* クラスを使用して、flex アイテムの拡大比率を制御する方法を紹介します。

.flex-shrink-* クラスを使用して、flex アイテムの縮小比率を制御する方法を紹介します。 * は、flex アイテムの拡大または縮小の比率を表す数値です。

<div class="d-flex">
  <div class="p-2 flex-grow-1">Item 1</div>
  <div class="p-2">Item 2</div>
</div>

Wrap

.flex-nowrap、.flex-wrap、.flex-wrap-reverse クラスを使用して、flex アイテムを折り返すかどうかを制御する方法を紹介します。

クラス	説明
`.flex-nowrap`	デフォルト値。flex アイテムの折り返しを許可しません。
`.flex-wrap`	flex アイテムの折り返しを許可します。
`.flex-wrap-reverse`	flex アイテムの折り返しを許可しますが、折り返し方向が逆になります。

<div class="d-flex flex-wrap">
  <!-- アイテムは折り返されます -->
</div>

<div class="d-flex flex-nowrap">
  <!-- アイテムは折り返されません -->
</div>

Order

.order-* クラスを使用して、flex アイテムの表示順序を制御する方法を紹介します。 * は数値を表し、数値が小さいほど、flex アイテムの表示順序が早くなります。

<div class="d-flex">
  <div class="p-2 order-2">Item 1</div>
  <div class="p-2 order-1">Item 2</div>
</div>

参考資料

<a href="https://getbootstrap.jp/docs/5.0/utilities/flex/">Bootstrap 5 日本語ドキュメント: Flex</a>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/flex">MDN Web Docs: Flexbox</a>

よくある質問

Q: flexbox とは？

A: flexbox は、CSS のレイアウトモジュールの一つで、要素を柔軟に配置するための仕組みです。

Q: Bootstrap 5 の Flex ユーティリティを使うメリットは？

A: Bootstrap 5 の Flex ユーティリティは、flexbox のプロパティを簡単に利用できるようにしたもので、より少ないコードで複雑なレイアウトを実現できます。

Q: Flex ユーティリティはレスポンシブに対応していますか？

A: はい、Bootstrap 5 の Flex ユーティリティはレスポンシブに対応しており、異なる画面サイズに合わせてレイアウトを調整することができます。