メインコンテンツへスキップ

Flexユーティリティ(Flex) v5.0.0-alpha1クラス追加

可変性の高いFlexユーティリティを使用して、グリッドカラム、ナビゲーション、コンポーネントなどのレイアウト、配置、サイズがすばやく管理できる。より複雑な実装では、カスタムCSSが必要な場合がある。

※参考

 

Flex動作を有効にする(Enable flex behaviors)

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

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

●デフォルトのFlexコンテナ(display: flex):.d-flex

デフォルトのFlexコンテナ!

●インラインFlexコンテナ(display: inline-flex):.d-inline-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 のレスポンシブ対応版も存在。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
デフォルトのFlexコンテナ .d-flex .d-sm-flex .d-md-flex .d-lg-flex .d-xl-flex .d-xxl-flex
インラインFlexコンテナ .d-inline-flex .d-sm-inline-flex .d-md-inline-flex .d-lg-inline-flex .d-xl-inline-flex .d-xxl-inline-flex
【設定】
  • デフォルトのFlexコンテナ:設定したい要素に .d(-{breakpoint})-flex(上記の「定義済みクラスの種類」から選択)を入れる
  • インラインFlexコンテナ:設定したい要素に .d(-{breakpoint})-inline-flex(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .d-xxl-flex, .d-xxl-inline-flex が追加

 

設定方向(Directionmns)

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

※参考:CSS flex-direction プロパティの解説(MDN日本語版)

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

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

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

●行頭からアイテムを設定(flex-direction: row):.flex-row

Flexアイテム1
Flexアイテム2
Flexアイテム3

●行末からアイテムを設定(flex-direction: row-reverse):.flex-row-reverse

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
行頭からアイテムを設定<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 を使用して下から縦並びを開始する。

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

●上からアイテムを設定(flex-direction: column):.flex-column

Flexアイテム1
Flexアイテム2
Flexアイテム3

●下からアイテムを設定(flex-direction: column-reverse):.flex-column-reverse

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
上からアイテムを設定<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 のレスポンシブ対応版もそれぞれ存在。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
行頭からFlexアイテムを設定 .flex-row .flex-sm-row .flex-md-row .flex-lg-row .flex-xl-row .flex-xxl-row
行末からFlexアイテムを設定 .flex-row-reverse .flex-sm-row-reverse .flex-md-row-reverse .flex-lg-row-reverse .flex-xl-row-reverse .flex-xxl-row-reverse
上からFlexアイテムを設定 .flex-column .flex-sm-column .flex-md-column .flex-lg-column .flex-xl-column .flex-xxl-column
下からFlexアイテムを設定 .flex-column-reverse .flex-sm-column-reverse .flex-md-column-reverse .flex-lg-column-reverse .flex-xl-column-reverse .flex-xxl-column-reverse
【設定】
  • 横並びにFlexアイテムを設定:Flexコンテナに .flex(-{breakpoint})-row.flex(-{breakpoint})-row-reverse(上記の「定義済みクラスの種類」から選択)を入れる
  • 縦並びにFlexアイテムを設定:Flexコンテナに .flex(-{breakpoint})-column.flex(-{breakpoint})-column-reverse(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .flex-xxl-{value} が追加

 

主軸方向のアイテムの整列(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日本語版)

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

●アイテムの行頭揃え(justify-content: flex-start):.justify-content-start

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの行末揃え(justify-content: flex-end):.justify-content-end

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの左右中央揃え(justify-content: center):.justify-content-center

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムを両端から均等に配置(justify-content: space-between):.justify-content-between

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムを等間隔に配置(justify-content: space-around):.justify-content-around

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの間隔を両端から均等に配置(justify-content: space-evenly):.justify-content-evenly v5.0.0-alpha1追加

Flexアイテム1
Flexアイテム2
Flexアイテム3

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

●アイテムの上揃え:.flex-column.justify-content-start

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの下揃え:.flex-column.justify-content-end

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの上下中央揃え:.flex-column.justify-content-center

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムを両端から均等に配置:.flex-column.justify-content-between

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムを等間隔に配置:.flex-column.justify-content-around

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの間隔を両端から均等に配置:.flex-column.justify-content-evenly v5.0.0-alpha1追加

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
横並びの場合<div class="d-flex justify-content-start">...</div>
縦並びの場合<div class="d-flex flex-column justify-content-start" style="height:200px;">...</div>

justify-content のレスポンシブ対応版も存在。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
アイテムの行頭揃え .justify-content-start .justify-content-sm-start .justify-content-md-start .justify-content-lg-start .justify-content-xl-start .justify-content-xxl-start
アイテムの行末揃え .justify-content-end .justify-content-sm-end .justify-content-md-end .justify-content-lg-end .justify-content-xl-end .justify-content-xxl-end
アイテムの左右中央揃え .justify-content-center .justify-content-sm-center .justify-content-md-center .justify-content-lg-center .justify-content-xl-center .justify-content-xxl-center
アイテムを両端から均等に配置 .justify-content-between .justify-content-sm-between .justify-content-md-between .justify-content-lg-between .justify-content-xl-between .justify-content-xxl-between
アイテムを等間隔に配置 .justify-content-around .justify-content-sm-around .justify-content-md-around .justify-content-lg-around .justify-content-xl-around .justify-content-xxl-around
アイテムの間隔を両端から均等に配置
v5.0.0-alpha1追加
.justify-content-evenly .justify-content-sm-evenly .justify-content-md-evenly .justify-content-lg-evenly .justify-content-xl-evenly .justify-content-xxl-evenly
【設定】
  • Flexコンテナに .justify-content(-{breakpoint})-{value}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .justify-content-xxl-{value} が追加
    • .justify-content(-{breakpoint})-evenly が追加

 

交差軸方向のアイテムの整列(Align items)

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

※参考:CSS align-items プロパティの解説(MDN日本語版)

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

●アイテムの上揃え(align-items: flex-start):.align-items-start

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの下揃え(align-items: flex-end):.align-items-end

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの上下中央揃え(align-items: center):.align-items-center

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムのbaseline揃え(align-items: baseline):.align-items-baseline

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムをコンテナいっぱいに伸ばす(align-items: stretch):.align-items-stretch

Flexアイテム1
Flexアイテム2
Flexアイテム3

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

●アイテムの行頭揃え:.flex-column.align-items-start

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの行末揃え:.flex-column.align-items-end

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの左右中央揃え:.flex-column.align-items-center

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムのbaseline揃え:.flex-column.align-items-baseline

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムをコンテナいっぱいに伸ばす:.flex-column.align-items-stretch

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
横並びの場合<div class="d-flex align-items-start" style="height:100px;">...</div>
縦並びの場合<div class="d-flex flex-column align-items-start">...</div>

align-items のレスポンシブ対応版も存在。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
アイテムの上揃え .align-items-start .align-items-sm-start .align-items-md-start .align-items-lg-start .align-items-xl-start .align-items-xxl-start
アイテムの下揃え .align-items-end .align-items-sm-end .align-items-md-end .align-items-lg-end .align-items-xl-end .align-items-xxl-end
アイテムの上下中央揃え .align-items-center .align-items-sm-center .align-items-md-center .align-items-lg-center .align-items-xl-center .align-items-xxl-center
アイテムのbaseline揃え .align-items-baseline .align-items-sm-baseline .align-items-md-baseline .align-items-lg-baseline .align-items-xl-baseline .align-items-xxl-baseline
アイテムをコンテナいっぱいに伸ばす .align-items-stretch .align-items-sm-stretch .align-items-md-stretch .align-items-lg-stretch .align-items-xl-stretch .align-items-xxl-stretch
【設定】
  • Flexコンテナに .align-items(-{breakpoint})-{value}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .align-items-xxl-{value} が追加

 

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

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

※参考:CSS align-self プロパティの解説(MDN日本語版)

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

●アイテムの上揃え(align-self: flex-start):.align-self-start

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの下揃え(align-self: flex-end):.align-self-end

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの上下中央揃え(align-self: center):.align-self-center

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムのbaseline揃え(align-self: baseline):.align-self-baseline

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムをコンテナいっぱいに伸ばす(align-self: stretch):.align-self-stretch

Flexアイテム1
Flexアイテム2
Flexアイテム3

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

●アイテムの行頭揃え:.flex-column > .align-self-start

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの行末揃え:.flex-column > .align-self-end

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムの左右中央揃え:.flex-column > .align-self-center

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムのbaseline揃え:.flex-column > .align-self-baseline

Flexアイテム1
Flexアイテム2
Flexアイテム3

●アイテムをコンテナいっぱいに伸ばす:.flex-column > .align-self-stretch

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
横並びの場合<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 のレスポンシブ対応版も存在。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
アイテムの上揃え .align-self-start .align-self-sm-start .align-self-md-start .align-self-lg-start .align-self-xl-start .align-self-xxl-start
アイテムの下揃え .align-self-end .align-self-sm-end .align-self-md-end .align-self-lg-end .align-self-xl-end .align-self-xxl-end
アイテムの上下中央揃え .align-self-center .align-self-sm-center .align-self-md-center .align-self-lg-center .align-self-xl-center .align-self-xxl-center
アイテムのbaseline揃え .align-self-baseline .align-self-sm-baseline .align-self-md-baseline .align-self-lg-baseline .align-self-xl-baseline .align-self-xxl-baseline
アイテムをコンテナいっぱいに伸ばす .align-self-stretch .align-self-sm-stretch .align-self-md-stretch .align-self-lg-stretch .align-self-xl-stretch .align-self-xxl-stretch
【設定】
  • 設定したいFlexアイテムに .align-self(-{breakpoint})-{value}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .align-self-xxl-{value} が追加

 

幅一杯のアイテム(Fill)

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

見本 見やすいよう枠と色を付けています
コンテンツが長めのFlexアイテム1
Flexアイテム2
Flexアイテム3

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

コンテンツが長めの
Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
横並びの場合<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>
定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
アイテムを幅一杯に配置 .flex-fill .flex-sm-fill .flex-md-fill .flex-lg-fill .flex-xl-fill .flex-xxl-fill
【設定】
  • 設定したいFlexアイテムに .flex(-{breakpoint})-fill を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .flex-xxl-fill が追加

 

アイテムの伸縮(Grow and shrink)

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

見本 見やすいよう枠と色を付けています
Flexアイテム1
Flexアイテム2
Flexアイテム3

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

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
横並びの場合<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-1flex-shrink: 1)を使用するFlexアイテム2は、その内容が強制的に改行され、.w-100 を持つFlexアイテム1のスペースが増える。
※コンテンツの余った部分は .flex-shrink-1 が入っていないアイテム(下記の見本では .w-100.h-100 の入っているアイテム)に移動。

見本 見やすいよう枠と色を付けています
Flexアイテム1
Flexアイテム2

縦並び(.flex-column.flex-column-reverse を追加)の場合は、次のとおりに動作

Flexアイテム1
Flexアイテム2
設定例
横並びの場合<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>
定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
アイテムを伸長する .flex-grow-1 .flex-sm-grow-1 .flex-md-grow-1 .flex-lg-grow-1 .flex-xl-grow-1 .flex-xxl-grow-1
アイテムを伸長しない .flex-grow-0 .flex-sm-grow-0 .flex-md-grow-0 .flex-lg-grow-0 .flex-xl-grow-0 .flex-xxl-grow-0
アイテムを収縮する .flex-shrink-1 .flex-sm-shrink-1 .flex-md-shrink-1 .flex-lg-shrink-1 .flex-xl-shrink-1 .flex-xxl-shrink-1
アイテムを収縮しない .flex-shrink-0 .flex-sm-shrink-0 .flex-md-shrink-0 .flex-lg-shrink-0 .flex-xl-shrink-0 .flex-xxl-shrink-0
【設定】
  • 設定したいFlexアイテムに .flex(-{breakpoint})-{grow|shrink}-{1|0} を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • .flex-xxl-{grow|shrink}-{1|0} が追加

 

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

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

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

※デフォルト

Flexアイテム1
Flexアイテム2
Flexアイテム3

●2つのアイテムを行末側に分離

Flexアイテム1
Flexアイテム2
Flexアイテム3

●2つのアイテムを行頭側に分離

Flexアイテム1
Flexアイテム2
Flexアイテム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>
【設定】
  • 行末側にアイテムを分離:.me-auto を行末に分離したい直前のアイテムに入れる
  • 行頭側にアイテムを分離:.ml-auto を行頭に分離したい直後のアイテムに入れる
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml-auto.ms-auto
      • .mr-auto.me-auto

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

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

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

●縦並びの行頭揃えで下部にアイテムを分離

Flexアイテム1
Flexアイテム2
Flexアイテム3

●縦並びの行末揃えで上部にアイテムを分離

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
縦並びの行頭揃えで下部にアイテムを分離<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>
【設定】
  • 下部にアイテムを分離:.mb-auto を分離したい直前のアイテムに入れる
  • 上部にアイテムを分離:.mt-auto を分離したい直後のアイテムに入れる

 

Flexアイテムの折り返し(Wrap)

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

※参考:CSS flex-wrap プロパティの解説(MDN日本語版)

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

●折り返しなし(flex-wrap: nowrap):.flex-nowrap

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●折り返しあり(flex-wrap: wrap):.flex-wrap

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●逆方向へ折り返し(flex-wrap: wrap-reverse):.flex-wrap-reverse

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

縦並び(.flex-column.flex-column-reverse を追加)の場合は、次のとおりに動作

●折り返しなし:.flex-column.flex-nowrap

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●折り返しあり:.flex-column.flex-wrap

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●逆方向へ折り返し:.flex-column.flex-wrap-reverse

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15
設定例
横並びの折り返しなし<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 のレスポンシブ対応版も存在。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
折り返しなし .flex-nowrap .flex-sm-nowrap .flex-md-nowrap .flex-lg-nowrap .flex-xl-nowrap .flex-xxl-nowrap
折り返しあり .flex-wrap .flex-sm-wrap .flex-md-wrap .flex-lg-wrap .flex-xl-wrap .flex-xxl-wrap
逆方向へ折り返し .flex-wrap-reverse .flex-sm-wrap-reverse .flex-md-wrap-reverse .flex-lg-wrap-reverse .flex-xl-wrap-reverse .flex-xxl-wrap-reverse
【設定】
  • 折り返しなし:Flexコンテナに .flex(-{breakpoint})-nowrap(上記の「定義済みクラスの種類」から選択)を入れる
  • 折り返しあり:Flexコンテナに .flex(-{breakpoint})-wrap(上記の「定義済みクラスの種類」から選択)を入れる
  • 逆方向へ折り返し:Flexコンテナに .flex(-{breakpoint})-wrap-reverse(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

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

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

※参考:CSS order プロパティの解説(MDN日本語版)

見本 見やすいよう枠と色を付けています
Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
<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: -1order: 6 を適用して要素の順序を変更するレスポンシブ対応の .order-first(最初のアイテム)と .order-last(最後のアイテム)クラスもある。

定義済みクラスの種類* は0~5の整数かfirst/last)
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
アイテムの表示順 .order-* .order-sm-* .order-md-* .order-lg-* .order-xl-* .order-xxl-*
【設定】
  • アイテムを並べたい順に .order(-{breakpoint})-** は0~5の整数かfirst/lastで設定可能)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【注意】
  • 要素は、order の値の昇順に配置され、order の値が同じ要素は、ソースコード内の記載順に配置
  • .order(-{breakpoint})-* を設定されていない要素が優先的に先に表示される
  • 設定する際は、{breakpoint} を揃えること(order-lg-3...order-1...order-md-2 と設定してもorder-1,order-md-2,order-lg-3 の順には表示されない模様)
【変更履歴】
  • 【v5.0.0-alpha1】
    • 設定できる数字が0~12より0~5に変更(12は多すぎるので5に減らした)
    • .order(-{breakpoint})-last の設定: order: 13order: 6

 

折り返しFlexアイテムの整列(Align content)

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

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

※参考:CSS align-content プロパティの解説(MDN日本語版)

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

●行の上揃え(align-content: flex-start):.align-content-start

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●行の下揃え(align-content: flex-end):.align-content-end

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●行の上下中央揃え(align-content: center):.align-content-center

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●行を両端から均等に配置(align-content: space-between):.align-content-between

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●行を等間隔に配置(align-content: space-around):.align-content-around

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●行をコンテナいっぱいに伸ばす(align-content: stretch):.align-content-stretch

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

縦並び(.flex-column.flex-column-reverse を追加)の場合は、次のとおりに動作

●列の行頭揃え(align-content: flex-start):.flex-column.align-content-start

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●列の行末揃え(align-content: flex-end):.flex-column.align-content-end

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●列の左右中央揃え(align-content: center):.flex-column.align-content-center

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●列を両端から均等に配置(align-content: space-between):.flex-column.align-content-between

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●列を等間隔に配置(align-content: space-around):.flex-column.align-content-around

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15

●列をコンテナいっぱいに伸ばす(align-content: stretch):.flex-column.align-content-stretch

Flexアイテム1
Flexアイテム2
Flexアイテム3
Flexアイテム4
Flexアイテム5
Flexアイテム6
Flexアイテム7
Flexアイテム8
Flexアイテム9
Flexアイテム10
Flexアイテム11
Flexアイテム12
Flexアイテム13
Flexアイテム14
Flexアイテム15
設定例
折り返し行の整列<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 のレスポンシブ対応版も存在。

定義済みクラスの種類
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大以上
≥1200px
超特大以上
≥1400px
v5.0.0-alpha1追加
行の上揃え .align-content-start .align-content-sm-start .align-content-md-start .align-content-lg-start .align-content-xl-start .align-content-xxl-start
行の下揃え .align-content-end .align-content-sm-end .align-content-md-end .align-content-lg-end .align-content-xl-end .align-content-xxl-end
行の上下中央揃え .align-content-center .align-content-sm-center .align-content-md-center .align-content-lg-center .align-content-xl-center .align-content-xxl-center
行を両端から均等に配置 .align-content-between .align-content-sm-between .align-content-md-between .align-content-lg-between .align-content-xl-between .align-content-xxl-between
行を等間隔に配置 .align-content-around .align-content-sm-around .align-content-md-around .align-content-lg-around .align-content-xl-around .align-content-xxl-around
行をコンテナいっぱいに伸ばす .align-content-stretch .align-content-sm-stretch .align-content-md-stretch .align-content-lg-stretch .align-content-xl-stretch .align-content-xxl-stretch
【設定】
  • Flexコンテナに .align-content(-{breakpoint})-{value}(上記の「定義済みクラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

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

Bootstrap 4のメディアオブジェクトコンポーネントを複製したいなら、以前よりもさらに柔軟性のあるカスタマイズを可能にするいくつかの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>
【設定】
  • div.d-flex > [div.flex-shrink-0 > <a> > <img>]《メディア画像の表示》 + {div.flex-grow-1.ms-3(行頭側のマージンを1remに) > [h*《説明のヘッダ》 + 《説明のコンテンツ》]}《メディアの説明》
  • メディア(<img>)は必ずしもリンク(<a>)で囲む必要はない
  • ヘッダの大きさ(<h*>)は、好みで変更可能
【変更履歴】
  • 【v5.0.0-alpha1】
    • div.mediadiv.d-flex
    • メディアの表示:a.mr-3 > <img>a.flex-shrink-0.me-3 > <img>
    • メディアの説明:div.media-body<div> のみ
    • .media, .media-body は削除
  • 【v5.0.0-beta3】
    • メディアの表示:a.flex-shrink-0.me-3 > <img>div.flex-shrink-0 > <a> > <img>
    • メディアの説明:<div>div.flex-grow-1.ms-3
    • メディアのヘッダ:h5.mt-0<h5>

2.配置

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

見本
Placeholder画像
これは、メディアコンポーネントのコンテンツ。これを任意のコンテンツに置き換えて、必要に応じて調整できる。
設定例
<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>
【設定】
  • .d-flex.align-items-center を追加
  • 下寄せにしたい場合は、.d-flex.align-self-end を追加

 

Sass v5.0.0-beta3追加

ユーティリティAPI(Utilities 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,
			),
		),