Flexユーティリティ（Flex） v5.0.0クラス追加

※参考

• CSS flexible box の利用（MDN日本語版）
• flex レイアウト詳説〜Flex Box Layout（IT工房）

Flex動作を有効にする（Enable flex behaviors）

表示ユーティリティを適用してFlexコンテナを作成し、直接の子要素をFlexアイテムに変換。Flexコンテナとアイテムは、追加のFlexプロパティを使用してさらに変更できる。

見本 見やすいよう色と枠を付けています

設定例

デフォルトのFlexコンテナ<div class="d-flex p-2">デフォルトのFlexコンテナ！</div>

インラインFlexコンテナ<div class="d-inline-flex p-2">インラインFlexコンテナ！</div>

.d-flex と .d-inline-flex のレスポンシブ対応版もある。

定義済クラスの種類

設定方向（Directionmns）

方向ユーティリティを使用してFlexコンテナ内のFlexアイテムの方向を設定。ほとんどの場合、ブラウザのデフォルトが row であるため、ここでは行頭から横並びのクラスは省略できるが、（レスポンシブなレイアウトなどで）この値を明示的に設定する必要がある場合がある。

※参考：CSS flex-direction プロパティの解説（MDN日本語版）

横並びにFlexアイテムを設定

.flex-row を使用して行頭から横並び（ブラウザのデフォルト）に設定するか、または .flex-row-reverse を使用して行末から横並びを開始する。

見本 見やすいよう色と枠を付けています

設定例

行頭からアイテムを設定<div class="d-flex flex-row">
  <div class="p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

行末からアイテムを設定<div class="d-flex flex-row-reverse">
  <div class="p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

縦並びにFlexアイテムを設定

.flex-column を使用して上から縦並びに設定するか、または .flex-column-reverse を使用して下から縦並びを開始する。

見本 見やすいよう色と枠を付けています

設定例

上からアイテムを設定<div class="d-flex flex-column">
  <div class="p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

下からアイテムを設定<div class="d-flex flex-column-reverse">
  <div class="p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

.flex-row, .flex-row-reverse, .flex-column, .flex-column-reverse のレスポンシブ対応版もそれぞれある。

定義済クラスの種類

主軸方向のアイテムの整列（Justify content）v5.0.0-alpha1クラス追加

Flexコンテナの justify-content ユーティリティを使用して、主軸（開始はx軸、flex-direction: column の場合はy軸）上のFlexアイテムの配置を変更。start（ブラウザのデフォルト）, end, center, between, around , evenly から選択。

※参考：CSS justify-content プロパティの解説（MDN日本語版）

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、以下のとおりに動作

設定例

横並びの場合<div class="d-flex justify-content-start">...</div>

縦並びの場合<div class="d-flex flex-column justify-content-start" style="height:200px;">...</div>

justify-content のレスポンシブ対応版もある。

定義済クラスの種類

交差軸方向のアイテムの整列（Align items）

Flexコンテナの align-items ユーティリティを使用して、交差軸（開始はy軸、flex-direction: column の場合はx軸）上のFlexアイテムの配置を変更。start, end, center, baseline, stretch（ブラウザのデフォルト）から選択。

※参考：CSS align-items プロパティの解説（MDN日本語版）

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、以下のとおりに動作

設定例

横並びの場合<div class="d-flex align-items-start" style="height:100px;">...</div>

縦並びの場合<div class="d-flex flex-column align-items-start">...</div>

align-items のレスポンシブ対応版もある。

定義済クラスの種類

交差軸方向のアイテム個別の整列（Align self）

Flexboxの align-self ユーティリティを使用して、交差軸（開始はy軸、flex-direction: column の場合はx軸）上の配置を個別に変更。align-itemsと同じオプションstart, end, center, baseline, stretch（ブラウザのデフォルト）から選択。

※参考：CSS align-self プロパティの解説（MDN日本語版）

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、以下のとおりに動作。

設定例

横並びの場合<div class="d-flex" style="height:100px;">
  <div class="p-2">Flexアイテム1</div>
  <div class="align-self-start p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

縦並びの場合<div class="d-flex flex-column">
  <div class="p-2">Flexアイテム1</div>
  <div class="align-self-start p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

align-self のレスポンシブ対応版もある。

定義済クラスの種類

幅一杯のアイテム（Fill）

一連の兄弟要素に対して .flex-fill クラス（flex: 1 1 auto）を使用して、それらのコンテンツを等幅（またはコンテンツがその枠線の枠を超えない場合は等幅）に強制的に移動し、使用できるすべての水平スペースを占有。
※コンテンツの余った部分を .flex-fill が入っているアイテムに均等に配分。

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、以下のとおりに動作。

設定例

横並びの場合<div class="d-flex">
  <div class="p-2 flex-fill">コンテンツが長めのFlexアイテム1</div>
  <div class="p-2 flex-fill">Flexアイテム2</div>
  <div class="p-2 flex-fill">Flexアイテム3</div>
</div>

縦並びの場合<div class="d-flex flex-column" style="height:200px;">
  <div class="p-2 flex-fill">コンテンツが長めの<br>Flexアイテム1</div>
  <div class="p-2 flex-fill">Flexアイテム2</div>
  <div class="p-2 flex-fill">Flexアイテム3</div>
</div>

定義済クラスの種類

アイテムの伸縮（Grow and shrink）

.flex-grow-* ユーティリティを使用して、使用可能なスペースを埋めるためにFlexアイテムの能力を切り替えられる。次の実例では、.flex-grow-1（flex-grow: 1）要素は使用できるすべてのスペースを使用し、残りの2つのFlex要素は必要最小限のスペースを使用。
※コンテンツの余った部分は .flex-grow-1 が入っているアイテムに移動。

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、以下のとおりに動作。

設定例

横並びの場合<div class="d-flex">
  <div class="p-2 flex-grow-1">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

縦並びの場合<div class="d-flex flex-column" style="height:200px;">
  <div class="p-2 flex-grow-1">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

.flex-shrink-* ユーティリティを使用して、必要に応じてFlexアイテムの収縮機能を切り替えられる。次の実例では、.flex-shrink-1（flex-shrink: 1）を使用するFlexアイテム2は、その内容が強制的に改行され、.w-100 を持つFlexアイテム1のスペースが増える。
※コンテンツの余った部分は .flex-shrink-1 が入っていないアイテム（下記の見本では .w-100 や .h-100 の入っているアイテム）に移動。

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、次のとおりに動作。

設定例

横並びの場合<div class="d-flex">
  <div class="p-2 w-100">Flexアイテム1</div>
  <div class="p-2 flex-shrink-1">Flexアイテム2</div>
</div>

縦並びの場合<div class="d-flex flex-column" style="height:200px;">
  <div class="p-2 h-100">Flexアイテム1</div>
  <div class="p-2 flex-shrink-1">Flexアイテム2</div>
</div>

定義済クラスの種類

自動マージン（Auto margins）v5.0.0-beta1設定変更

Flexの整列と自動マージンを混在させると、Flexboxはかなり素晴らしい機能を提供する。自動マージンでFlexアイテムを制御する3つの実例を以下に表示。デフォルト（自動マージンなし）、2つのアイテムを行末側に分離（.me-auto）、2つのアイテムを行頭側に分離（.ms-auto）の3パターン。

見本 見やすいよう色と枠を付けています

Bootstrap5.xの設定例 緑背景が変更箇所

2つのアイテムを行末側に分離<div class="d-flex">
  <div class="mr-auto p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

2つのアイテムを行頭側に分離<div class="d-flex">
  <div class="p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="ms-auto p-2">Flexアイテム3</div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

2つのアイテムを右側に分離<div class="d-flex">
  <div class="mr-auto p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

2つのアイテムを左側に分離<div class="d-flex">
  <div class="p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="ml-auto p-2">Flexアイテム3</div>
</div>

交差軸方向のアイテムの整列（With align-items）

align-items, flex-direction: column と合わせて margin-top: auto や margin-bottom: auto を混在させて、Flexアイテムをコンテナの垂直方向に移動させる。

見本 見やすいよう色と枠を付けています

設定例

縦並びの行頭揃えで下部にアイテムを分離<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="p-2">Flexアイテム3</div>
</div>

縦並びの行末揃えで上部にアイテムを分離<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flexアイテム1</div>
  <div class="p-2">Flexアイテム2</div>
  <div class="mt-auto p-2">Flexアイテム3</div>
</div>

Flexアイテムの折り返し（Wrap）

FlexアイテムがFlexコンテナ内でどのように折り返すかを変更できる。.flex-nowrap を使用した折り返しなし（ブラウザのデフォルト）、.flex-wrap を使用した折り返しあり、または .flex-wrap-reverse を使用した逆方向へ折り返しが選択できる。

※参考：CSS flex-wrap プロパティの解説（MDN日本語版）

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、次のとおりに動作。

設定例

横並びの折り返しなし<div class="d-flex flex-nowrap">
  ...
</div>

横並びの折り返しあり<div class="d-flex flex-wrap">
  ...
</div>

横並びの逆方向へ折り返し<div class="d-flex flex-wrap-reverse">
  ...
</div>

縦並びの折り返しなし<div class="d-flex flex-column flex-nowrap">
  ...
</div>

縦並びの折り返しあり<div class="d-flex flex-column flex-wrap" style="height:300px;">
  ...
</div>

縦並びの逆方向へ折り返し<div class="d-flex flex-column flex-wrap-reverse" style="height:300px;">
  ...
</div>

flex-wrap のレスポンシブ対応版もある。

定義済クラスの種類

Flexアイテムの表示順（Order）v5.0.0-alpha1設定変更

いくつかの order ユーティリティを使用して特定のFlexアイテムの表示順が変更できる。アイテムを最初か最後にするためのオプションと、DOMの順序を使用するためのリセットのみを提供。order は0から5までの任意の整数値をとるので、追加の値が必要ならカスタムでCSSを追加して下さい。

※参考：CSS order プロパティの解説（MDN日本語版）

見本 見やすいよう色と枠を付けています

設定例

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">Flexアイテム1</div>
  <div class="order-2 p-2">Flexアイテム2</div>
  <div class="order-1 p-2">Flexアイテム3</div>
</div>

order のレスポンシブ対応版もある。さらに、それぞれ order: -1 と order: 6 を適用して要素の順序を変更するレスポンシブ対応の .order-first（最初のアイテム）と .order-last（最後のアイテム）クラスもある。

定義済クラスの種類（* は0～5の整数かfirst/last）

折り返しFlexアイテムの整列（Align content）

Flexコンテナの align-content ユーティリティを使用して、Flexアイテムを交差軸上に整列させる。start（ブラウザのデフォルト）, end, center, between, around, stretch から選択。これらのユーティリティを実証するために、flex-wrap: wrap を強制し、Flexアイテムの数を増やした。

注意喚起！ このプロパティは、折り返しのない単一行のFlexアイテムには影響しない。

※参考：CSS align-content プロパティの解説（MDN日本語版）

見本 見やすいよう色と枠を付けています

縦並び（.flex-column か .flex-column-reverse を追加）の場合は、次のとおりに動作。

設定例

折り返し行の整列<div class="d-flex align-content-start flex-wrap" style="height: 200px;">...</div>

折り返し列の整列<div class="d-flex flex-column align-content-start flex-wrap" style="height: 200px;">...</div>

align-content のレスポンシブ対応版もある。

定義済クラスの種類

メディアオブジェクト（Media object）v5.0.0-beta3設定変更、独立したコンポーネントから移動

Bootstrap4のメディアオブジェクトコンポーネントを複製したいなら、以前よりもさらに柔軟性のあるカスタマイズを可能にするいくつかのFlexユーティリティを使用すれば、すぐに再作成できる。

1.基本の設定

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<div class="d-flex">
  <div class="flex-shrink-0">
    <a href="#">
      <img src="..." alt="画像">
    </a>
  </div>
  <div class="flex-grow-1 ms-3">
    <h5>メディアのヘッダ</h5>
    これは、メディアコンポーネントのコンテンツ。...
  </div>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<div class="media">
  <a href="#" class="mr-3">
    <img src="..." alt="画像">
  </a>
  <div class="media-body">
    <h5 class="mt-0">メディアのヘッダ</h5>
    これは、メディアコンポーネントのコンテンツ。...
  </div>
</div>

2.配置

そして、画像の横にあるコンテンツを垂直方向に中央揃えにする。

見本

設定例

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    これは、メディアコンポーネントのコンテンツ。これを任意のコンテンツに置き換えて、必要に応じて調整できる。
  </div>
</div>

CSS

SassユーティリティAPI（Sass utilities API）v5.0.0-beta3追加、v5.3.0ユーティリティAPIより名称変更

Flexユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定

scss/_utilities.scss 内 utils-flex の設定"flex": (
  responsive: true,
  property: flex,
  values: (fill: 1 1 auto)
),
"flex-direction": (
  responsive: true,
  property: flex-direction,
  class: flex,
  values: row column row-reverse column-reverse
),
"flex-grow": (
  responsive: true,
  property: flex-grow,
  class: flex,
  values: (
    grow-0: 0,
    grow-1: 1,
  )
),
"flex-shrink": (
  responsive: true,
  property: flex-shrink,
  class: flex,
  values: (
    shrink-0: 0,
    shrink-1: 1,
  )
),
"flex-wrap": (
  responsive: true,
  property: flex-wrap,
  class: flex,
  values: wrap nowrap wrap-reverse
),
"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"justify-content": (
  responsive: true,
  property: justify-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
  )
),
"align-items": (
  responsive: true,
  property: align-items,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
  )
),
"align-content": (
  responsive: true,
  property: align-content,
  values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
  )
),
"align-self": (
  responsive: true,
  property: align-self,
  values: (
    auto: auto,
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
  )
),
"order": (
  responsive: true,
  property: order,
  values: (
    first: -1,
    0: 0,
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    last: 6,
  ),
),