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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

Flexユーティリティ(Flex) v4.0.0新設v4.1.0追加

可変性の高い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
デフォルトのFlexコンテナ .d-flex .d-sm-flex .d-md-flex .d-lg-flex .d-xl-flex
インラインFlexコンテナ .d-inline-flex .d-sm-inline-flex .d-md-inline-flex .d-lg-inline-flex .d-xl-inline-flex

【設定】

  • デフォルトのFlexコンテナ:設定したい要素に .d(-{breakpoint})-flex(上記の「定義済クラスの種類」から選択)を入れる
  • インラインFlexコンテナ:設定したい要素に .d(-{breakpoint})-inline-flex(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

設定方向(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
左からFlexアイテムを設定 .flex-row .flex-sm-row .flex-md-row .flex-lg-row .flex-xl-row
右からFlexアイテムを設定 .flex-row-reverse .flex-sm-row-reverse .flex-md-row-reverse .flex-lg-row-reverse .flex-xl-row-reverse
上からFlexアイテムを設定 .flex-column .flex-sm-column .flex-md-column .flex-lg-column .flex-xl-column
下からFlexアイテムを設定 .flex-column-reverse .flex-sm-column-reverse .flex-md-column-reverse .flex-lg-column-reverse .flex-xl-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(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

主軸方向のアイテムの整列(Justify content)

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

※参考: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

縦並び(.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
設定例
横並びの場合<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
アイテムの左寄せ .justify-content-start .justify-content-sm-start .justify-content-md-start .justify-content-lg-start .justify-content-xl-start
アイテムの右寄せ .justify-content-end .justify-content-sm-end .justify-content-md-end .justify-content-lg-end .justify-content-xl-end
アイテムの左右中央揃え .justify-content-center .justify-content-sm-center .justify-content-md-center .justify-content-lg-center .justify-content-xl-center
アイテムを両端から均等に配置 .justify-content-between .justify-content-sm-between .justify-content-md-between .justify-content-lg-between .justify-content-xl-between
アイテムを等間隔に配置 .justify-content-around .justify-content-sm-around .justify-content-md-around .justify-content-lg-around .justify-content-xl-around

【設定】

  • Flexコンテナに .justify-content(-{breakpoint})-{value}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

交差軸方向のアイテムの整列(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
アイテムの上揃え .align-items-start .align-items-sm-start .align-items-md-start .align-items-lg-start .align-items-xl-start
アイテムの下揃え .align-items-end .align-items-sm-end .align-items-md-end .align-items-lg-end .align-items-xl-end
アイテムの上下中央揃え .align-items-center .align-items-sm-center .align-items-md-center .align-items-lg-center .align-items-xl-center
アイテムのbaseline揃え .align-items-baseline .align-items-sm-baseline .align-items-md-baseline .align-items-lg-baseline .align-items-xl-baseline
アイテムをコンテナいっぱいに伸ばす .align-items-stretch .align-items-sm-stretch .align-items-md-stretch .align-items-lg-stretch .align-items-xl-stretch

【設定】

  • Flexコンテナに .align-items(-{breakpoint})-{value}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

交差軸方向のアイテム個別の整列(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
アイテムの上揃え .align-self-start .align-self-sm-start .align-self-md-start .align-self-lg-start .align-self-xl-start
アイテムの下揃え .align-self-end .align-self-sm-end .align-self-md-end .align-self-lg-end .align-self-xl-end
アイテムの上下中央揃え .align-self-center .align-self-sm-center .align-self-md-center .align-self-lg-center .align-self-xl-center
アイテムのbaseline揃え .align-self-baseline .align-self-sm-baseline .align-self-md-baseline .align-self-lg-baseline .align-self-xl-baseline
アイテムをコンテナいっぱいに伸ばす .align-self-stretch .align-self-sm-stretch .align-self-md-stretch .align-self-lg-stretch .align-self-xl-stretch

【設定】

  • 設定したいFlexアイテムに .align-self(-{breakpoint})-{value}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

幅一杯のアイテム(Fill)v4.1.0新設

一連の兄弟要素に対して .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
アイテムを幅一杯に配置 .flex-fill .flex-sm-fill .flex-md-fill .flex-lg-fill .flex-xl-fill

【設定】

  • 設定したいFlexアイテムに .flex(-{breakpoint})-fill を入れる

 

アイテムの伸縮(Grow and shrink)v4.1.0新設

.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
アイテムを伸長する .flex-grow-1 .flex-sm-grow-1 .flex-md-grow-1 .flex-lg-grow-1 .flex-xl-grow-1
アイテムを伸長しない .flex-grow-0 .flex-sm-grow-0 .flex-md-grow-0 .flex-lg-grow-0 .flex-xl-grow-0
アイテムを収縮する .flex-shrink-1 .flex-sm-shrink-1 .flex-md-shrink-1 .flex-lg-shrink-1 .flex-xl-shrink-1
アイテムを収縮しない .flex-shrink-0 .flex-sm-shrink-0 .flex-md-shrink-0 .flex-lg-shrink-0 .flex-xl-shrink-0

【設定】

  • 設定したいFlexアイテムに .flex(-{breakpoint})-{grow|shrink}-{1|0} を入れる

 

自動マージン(Auto margins)

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

残念なことに、IE10とIE11では、親要素がデフォルト以外の justify-content の値を持つFlexアイテムの自動マージンを正しくサポートしていない。詳細については、こちらのStackOverflowの回答に記載。

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

※デフォルト

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

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

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

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

Flexアイテム1
Flexアイテム2
Flexアイテム3
設定例
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>

【設定】

  • 右側にアイテムを分離:.mr-auto を右に分離したい直前のアイテムに入れる
  • 左側にアイテムを分離:.ml-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
折り返しなし .flex-nowrap .flex-sm-nowrap .flex-md-nowrap .flex-lg-nowrap .flex-xl-nowrap
折り返しあり .flex-wrap .flex-sm-wrap .flex-md-wrap .flex-lg-wrap .flex-xl-wrap
逆方向へ折り返し .flex-wrap-reverse .flex-sm-wrap-reverse .flex-md-wrap-reverse .flex-lg-wrap-reverse .flex-xl-wrap-reverse

【設定】

  • 折り返しなし:Flexコンテナに .flex(-{breakpoint})-nowrap(上記の「定義済クラスの種類」から選択)を入れる
  • 折り返しあり:Flexコンテナに .flex(-{breakpoint})-wrap(上記の「定義済クラスの種類」から選択)を入れる
  • 逆方向へ折り返し:Flexコンテナに .flex(-{breakpoint})-wrap-reverse(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

 

Flexアイテムの表示順(Order)

いくつかの order ユーティリティを使用して特定のFlexアイテムの表示順を変更。

※参考: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 のレスポンシブ対応版もある。

定義済クラスの種類* は0~12の整数またはfirst/last)
ビューポートサイズ 全て
≥0px
小以上
≥576px
中以上
≥768px
大以上
≥992px
特大
≥1200px
アイテムの表示順 .order-* .order-sm-* .order-md-* .order-lg-* .order-xl-*

【設定】

  • アイテムを並べたい順に .order(-{breakpoint})-** は0~12数値またはfirst/lastで設定可能)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる

【注意】

  • 要素は、order の値の昇順に配置され、order の値が同じ要素は、ソースコード内の記載順に配置
  • .order(-{breakpoint})-* を設定されていない要素が優先的に先に表示される
  • 設定する際は、{breakpoint} を揃えること(order-lg-3...order-1...order-md-2 と設定してもorder-1,order-md-2,order-lg-3 の順には表示されない模様)

 

折り返し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
行の上揃え .align-content-start .align-content-sm-start .align-content-md-start .align-content-lg-start .align-content-xl-start
行の下揃え .align-content-end .align-content-sm-end .align-content-md-end .align-content-lg-end .align-content-xl-end
行の上下中央揃え .align-content-center .align-content-sm-center .align-content-md-center .align-content-lg-center .align-content-xl-center
行を両端から均等に配置 .align-content-between .align-content-sm-between .align-content-md-between .align-content-lg-between .align-content-xl-between
行を等間隔に配置 .align-content-around .align-content-sm-around .align-content-md-around .align-content-lg-around .align-content-xl-around
行をコンテナいっぱいに伸ばす .align-content-stretch .align-content-sm-stretch .align-content-md-stretch .align-content-lg-stretch .align-content-xl-stretch

【設定】

  • Flexコンテナに .align-content(-{breakpoint})-{value}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる