Bootstrap5 Flexユーティリティ

Flexユーティリティを使うと、細かい位置調整を簡単に実装することができる。

Gridが包括的なレイアウトの調整に用いるのに対して、こちらは細かいパーツ、コンポーネントなどの制御に向いている。

.d-flexと配置方向

宣言した要素の直下の子要素をFlexアイテムに変換する。孫要素など距離が離れると対象ではなくなる。

https://getbootstrap.jp/docs/5.0/utilities/flex/#direction

<!-- flex-rowは水平方向への配置（デフォルト）-->
<div class="d-flex flex-row">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

<!-- flex-coは垂直方向への配置（デフォルト）-->
<div class="d-flex flex-column">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

justify-contentによる横方向の配置位置調整

justify-content-???を使うことで、内包する子要素の配置位置を細かく指定することができる。

均等配置なども簡単に指定可能。

https://getbootstrap.jp/docs/5.0/utilities/flex/#justify-content

<!-- 要素をまとめて中央配置する -->
<div class="d-flex justify-content-center">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

<!-- 要素をまとめて終了位置に配置する -->
<div class="d-flex justify-content-end">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.align-itemによるクロス方向の配置位置調整

.align-itemを使うと、面倒な上下中央配置を簡単に指定できる。

https://getbootstrap.jp/docs/5.0/utilities/flex/#align-items

<!-- 要素をまとめて上下中央位置に配置する -->
<div class="d-flex align-items-center">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

<!-- 要素の高さをとって配置（デフォルト） -->
<div class="d-flex align-items-stretch">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.flex-fillで横幅MAXにいい感じに配置

兄弟要素に.flex-fillを指定すると、コンテンツに応じた横幅に自動配置してくれる。

https://getbootstrap.jp/docs/5.0/utilities/flex/#fill

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

どれか１つだけ領域を取れるだけ取らせたいが、他は必要最低限の幅が欲しい場合、flex-grow-1を用いる。

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

オートマージンとの組み合わせ

特定の要素だけ左・右寄せしたい場合は、ms-autoなどのオートマージンユーティリティを組み合わせると便利。

https://getbootstrap.jp/docs/5.0/utilities/flex/#auto-margins

margin-autoまわり、念のため。

<!-- 最初の要素の右マージンをオートにする（最初だけ左寄せ＆残りは右寄せ） -->
<div class="d-flex bd-highlight">
  <div class="me-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<!-- 最後の要素の左マージンをオートにする（最後だけ右寄せ＆残りは左寄せ） -->
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>

よくあるリスト系に使えるMedia Object

よくある、サムネイルと補足説明の繰り返しなどを実装できるMedia Object（BS5は廃止）もFlexで再現できる。

https://getbootstrap.jp/docs/5.0/utilities/flex/#media-object

<div class="d-flex"><!-- 要素を上下中央配置にしたい場合は.align-items-centerも指定する -->
  <div class="flex-shrink-0"><!-- 縮小レベルがゼロ（縮小させない） -->
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3"><!-- 利用可能なスペースをすべて使う -->
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>