Flexユーティリティ（Flex） v4.0.0新設v4.1.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）

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

※参考：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）v4.1.0新設

一連の兄弟要素に対して .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）v4.1.0新設

.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）

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

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

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

設定例

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）

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

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

定義済クラスの種類（* は0～12の整数または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 のレスポンシブ対応版もある。

定義済クラスの種類