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

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(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる