Bootstrap 5 フレックス
フレックスボックス
Bootstrap 3 と Bootstrap 4 & 5 の最大の違いは、Bootstrap 5 がフロートではなく flexbox を使用してレイアウトを処理することです。
フレキシブルなボックスレイアウトモジュールを使用すると、フロートやポジションを使用せずにフレキシブルなレスポンシブレイアウト構造を簡単に設計できます。
flex に馴染みがない場合は、私たちの CSS Flexbox チュートリアル 中で学習してください。
注：IE9 以前のバージョンでは Flexbox がサポートされていません。
注：IE8-9 のサポートが必要な場合は、Bootstrap 3 を使用してください。これは最も安定した Bootstrap 版本であり、チームは依然として重要なバグ修正やドキュメントの変更をサポートしていますが、新機能の追加は行いません。
例
flexbox 容器を作成し、直接子要素を flex 项に変換するには、使用してください d-flex クラス：
<div class="d-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary">フレックスプロジェクト 3</div> </div>
例
行内 flexbox 容器を作成するには、使用してください d-inline-flex クラス：
<div class="d-inline-flex p-3 bg-secondary text-white"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary">フレックスプロジェクト 3</div> </div>
水平方向
以下を使用してください .flex-row 水平（並排）にエラストアイテムを表示します。これはデフォルトの設定です。
ヒント：自動外マージンを使用して .flex-row-reverse 水平方向に右対齐できます：
例
<div class="d-flex flex-row bg-secondary"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary">フレックスプロジェクト 3</div> </div> <div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary">フレックスプロジェクト 3</div> </div>
垂直方向
以下を使用してください .flex-column flexアイテムを垂直に表示（重ね合わせ）、または以下を使用します： .flex-column-reverse 垂直方向を反転します：
例
<div class="d-flex flex-column"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary">フレックスプロジェクト 3</div> </div> <div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary">フレックスプロジェクト 3</div> </div>
内容をアライメントする
自動外マージンを使用して .justify-content-* クラスはエラストアイテムのアライメント方法を変更できます。有効なクラスは：：
start（デフォルト）endcenterbetweenaround
例
<div class="d-flex justify-content-start">...</div> <div class="d-flex justify-content-end">...</div> <div class="d-flex justify-content-center">...</div> <div class="d-flex justify-content-between">...</div> <div class="d-flex justify-content-around">...</div>
等幅
フレックスプロジェクト上で使用して .flex-fill それらを等幅に強制することができます：
例
<div class="d-flex"> <div class="p-2 bg-info flex-fill">エラストアイテム 1</div> <div class="p-2 bg-warning flex-fill">エラストアイテム 2</div> <div class="p-2 bg-primary flex-fill">エラストアイテム 3</div> </div>
伸びる
フレックスプロジェクト上で使用して .flex-grow-1 余分なスペースを占めることができます。以下の例では、最初の2つの flex 要素が必要なスペースを占めており、最後の要素が残りの利用可能なスペースを占めています：
例
<div class="d-flex"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary flex-grow-1">フレックスプロジェクト 3</div> </div>
ヒント：フレックスプロジェクト上で使用して .flex-shrink-1 必要に応じて縮小することができます。
順序
自動外マージンを使用して .order クラスは特定のフレックスアイテムの視覚的な順序を変更できます。有効なクラスは0から5までで、最も低い数字が最も高い優先順位を持っています（order-1はorder-2よりも前に表示されます）：
例
<div class="d-flex bg-secondary"> <div class="p-2 bg-info order-3">フレックスプロジェクト 1</div> <div class="p-2 bg-warning order-2">フレックスプロジェクト 2</div> <div class="p-2 bg-primary order-1">フレックスプロジェクト 3</div> </div>
自動外マージン
自動外マージンを使用して .ms-auto（アイテムを右に押し出す）または .me-auto（アイテムを左に押し出す）フレックスプロジェクトに自動マージンを簡単に追加できます：
例
<div class="d-flex bg-secondary"> <div class="p-2 ms-auto bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 bg-primary">フレックスプロジェクト 3</div> </div> <div class="d-flex bg-secondary"> <div class="p-2 bg-info">フレックスプロジェクト 1</div> <div class="p-2 bg-warning">フレックスプロジェクト 2</div> <div class="p-2 me-auto bg-primary">フレックスプロジェクト 3</div> </div>
改行
通じて .flex-nowrap（デフォルト）、.flex-wrap または .flex-wrap-reverse、フレックスプロジェクトがフレックスコンテナ内にどのようにパッケージされるかを制御します。
例
<div class="d-flex flex-wrap">..</div> <div class="d-flex flex-wrap-reverse">..</div> <div class="d-flex flex-nowrap">..</div>
内容をアライメントする
以下を使用してください .align-content-* クラスは、エラストイックなプロジェクトの垂直なアライメント方法を制御します。有効なクラスは：
.align-content-start（デフォルト）.align-content-end.align-content-center.align-content-between.align-content-around.align-content-stretch
注：これらのクラスは単一行のエラストイアアイテムに影響を与えません。
以下のボタンをクリックして、インスタンスボックス内のエラストイアアイテムの垂直アライメント方式を変更して、5つのクラスの違いを確認してください：
例
<div class="d-flex flex-wrap align-content-start">..</div> <div class="d-flex flex-wrap align-content-end">..</div> <div class="d-flex flex-wrap align-content-center">..</div> <div class="d-flex flex-wrap align-content-around">..</div> <div class="d-flex flex-wrap align-content-stretch">..</div>
アイテムをアライメントする
以下を使用してください .align-items-* クラス制御単一行エラストイアプロジェクトの垂直アライメント方式です。有効なクラスは：
.align-items-start.align-items-end.align-items-center.align-items-baseline.align-items-stretch（デフォルト）
以下のボタンをクリックして、5つのクラスの違いを確認してください：
例
<div class="d-flex align-items-start">..</div> <div class="d-flex align-items-end">..</div> <div class="d-flex align-items-center">..</div> <div class="d-flex align-items-baseline">..</div> <div class="d-flex align-items-stretch">..</div>
セルフアライメント
以下を使用してください .align-self-* クラス制御エラストイアプロジェクトを指定の垂直アライメント方式です。有効なクラスは：
.align-self-start.align-self-end.align-self-center.align-self-baseline.align-self-stretch（デフォルト）
以下のボタンをクリックして、5つのクラスの違いを確認してください：
例
<div class="d-flex bg-light" style="height:150px"> <div class="p-2 border">フレックスアイテム1</div> <div class="p-2 border align-self-start">フレックスアイテム2</div> <div class="p-2 border">フレックスアイテム3</div> </div>
レスポンシブフレックスクラス
すべてのフレックスクラスには追加のレスポンシブクラスが含まれており、特定のスクリーンサイズで特定のフレックスクラスを設定するのが簡単になります。
*記号はsm、md、lg、xl、xxlに置き換えられ、それぞれ小、中、大、超大、特大スクリーンを表します。
特定のフレックスクラスを検索 ..
| クラス | 説明 | 例 |
|---|---|---|
| フレックスコンテナ | ||
.d-*-flex |
異なるスクリーンにフレックスボックスコンテナを作成します。 | 試してみる |
.d-*-inline-flex |
異なるスクリーンにフレックスボックスコンテナを行内に作成します。 | 試してみる |
| 方向 | ||
.flex-*-row |
異なるスクリーン上でエラストイックアイテムを水平に表示します。 | 試してみる |
.flex-*-row-reverse |
異なるスクリーン上でエラストイックアイテムを水平に右詰めに表示します。 | 試してみる |
.flex-*-column |
異なるスクリーン上でエラストイックアイテムを垂直に表示します。 | 試してみる |
.flex-*-column-reverse |
異なるスクリーン上でエラストイックアイテムを逆の順序で垂直に表示します。 | 試してみる |
| 並び行の内容 | ||
.justify-content-*-start |
異なるスクリーンの先頭（左詰め）からエラストイックアイテムを表示します。 | 試してみる |
.justify-content-*-end |
異なるスクリーンの末尾（右詰め）にエラストイックアイテムを表示します。 | 試してみる |
.justify-content-*-center |
異なるスクリーンのエラストイックコンテナの中心にエラストイックアイテムを表示します。 | 試してみる |
.justify-content-*-between |
異なるスクリーン上でエラストイックアイテムを均等に表示します。 | 試してみる |
.justify-content-*-around |
異なるスクリーン上でエラストイックアイテムを「囲む」ように表示します。 | 試してみる |
| Fill / 等幅 | ||
.flex-*-fill |
強制的にエラストイックアイテムの幅を異なるスクリーン上で等しくします。 | 試してみる |
| 拡張 | ||
.flex-*-grow-0 |
アイテムが異なるスクリーン上で拡張しないようにします。 | |
.flex-*-grow-1 |
異なるスクリーン上でアイテムを拡張します。 | |
| 収縮 | ||
.flex-*-shrink-0 |
アイテムを異なるスクリーン上で縮小させないでください。 | |
.flex-*-shrink-1 |
アイテムを異なるスクリーン上で縮小させます。 | |
| 順序 | ||
.order-*-0-12 |
小さいスクリーンでは 0 から 12 に順序を変更します。 | 試してみる |
| 改行 | ||
.flex-*-nowrap |
異なるスクリーン上でアイテムを改行しないでください。 | 試してみる |
.flex-*-wrap |
異なるスクリーン上でアイテムを改行します。 | 試してみる |
.flex-*-wrap-reverse |
異なるスクリーン上でアイテムの改行を逆転します。 | 試してみる |
| 内容をアライメントする | ||
.align-content-*-start |
異なるスクリーンの先頭でアイテムをアライメントします。 | 試してみる |
.align-content-*-end |
異なるスクリーンの末尾でアイテムをアライメントします。 | 試してみる |
.align-content-*-center |
異なるスクリーンの中心でアイテムをアライメントします。 | 試してみる |
.align-content-*-around |
異なるスクリーンの周りでアイテムをアライメントします。 | 試してみる |
.align-content-*-stretch |
異なるスクリーン上でアイテムを伸ばします。 | 試してみる |
| アイテムをアライメントする | ||
.align-items-*-start |
異なるスクリーンの先頭で単一行アイテムをアライメントします。 | 試してみる |
.align-items-*-end |
異なるスクリーンの末尾で単一行アイテムをアライメントします。 | 試してみる |
.align-items-*-center |
異なるスクリーンの中心で単一行アイテムをアライメントします。 | 試してみる |
.align-items-*-baseline |
異なるスクリーンのベースライン上で単一行アイテムをアライメントします。 | 試してみる |
.align-items-*-stretch |
異なるスクリーン上で単一行アイテムを伸ばします。 | 試してみる |
| 自身をアライメントする | ||
.align-self-*-start |
異なるスクリーンの先頭でフレックスアイテムをアライメントします。 | 試してみる |
.align-self-*-end |
異なるスクリーンの末尾でフレックスアイテムをアライメントします。 | 試してみる |
.align-self-*-center |
異なるスクリーンの中心でフレックスアイテムをアライメントします。 | 試してみる |
.align-self-*-baseline |
異なるスクリーンのベースライン上でフレックスアイテムをアライメントします。 | 試してみる |
.align-self-*-stretch |
異なるスクリーン上でフレックスアイテムを伸ばします。 | 試してみる |
