ブートストラップ4フレックス
ブートストラップ4フレックス
フレックスクラスを使用して、Bootstrap4コンポーネントのレイアウトを制御します。
Flexbox
Bootstrap3とBootstrap4の最大の違いは、Bootstrap4がレイアウトの処理にfloatではなくflexboxを使用するようになったことです。
フレキシブルボックスレイアウトモジュールを使用すると、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できます。flexを初めて使用する場合は、CSSFlexboxチュートリアルでそれについて読むことができます。
注： FlexboxはIE9以前のバージョンではサポートされていません。
IE8-9のサポートが必要な場合は、 Bootstrap 3を使用してください。これはBootstrapの最も安定したバージョンであり、重大なバグ修正とドキュメントの変更についてチームによって引き続きサポートされています。ただし、新しい機能は追加されません。
フレックスボックスコンテナを作成し、直接の子をフレックスアイテムに変換するには、次のd-flexクラスを使用します。
例
例
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
インラインフレックスボックスコンテナを作成するには、次のd-inline-flexクラスを使用します。
例
例
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
水平方向
.flex-rowフレックスアイテムを水平に（並べて）表示するために使用します。これはデフォルトです。
ヒント：.flex-row-reverse
水平方向を右揃えにするために使用します。
例
例
<div class="d-flex flex-row
bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
垂直方向
.flex-columnフレックスアイテムを垂直に（互いの上に）表示するため、または.flex-column-reverse
垂直方向を逆にするために使用します。
例
例
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div
class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
コンテンツを正当化する
.justify-content-*クラスを使用して、フレックスアイテムの配置を変更します。有効なクラスはstart（デフォルト）end、、、または：ですcenter。betweenaround
例
例
<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">Flex
item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
育つ
フレックスアイテムで使用.flex-grow-1して、残りのスペースを占有します。以下の例では、最初の2つのフレックスアイテムが必要なスペースを占有し、最後のアイテムが残りの使用可能なスペースを占有します。
例
例
<div class="d-flex">
<div class="p-2 bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
ヒント：.flex-shrink-1必要に応じて、フレックスアイテムに使用して収縮させます。
注文
.orderクラスを使用して、特定のフレックスアイテムの視覚的な順序を変更します。有効なクラスは0から12で、最小の番号が最高の優先順位を持ちます（順序1は順序2の前に表示されますなど）。
例
例
<div class="d-flex bg-secondary">
<div class="p-2 bg-info
order-3">Flex
item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
自動マージン
.mr-auto（アイテムを右に押す）または.ml-auto（アイテムを左に押す）を使用して、フレックスアイテムに自動マージンを簡単に追加します。
例
例
<div class="d-flex
bg-secondary">
<div class="p-2 mr-auto bg-info">Flex
item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div
class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex
item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item
3</div>
</div>
包む
フレックスアイテムがフレックスコンテナでどのようにラップされるかを.flex-nowrap（デフォルト）、.flex-wrapまたはで制御し.flex-wrap-reverseます。
下のボタンをクリックして、サンプルボックスのフレックスアイテムのラッピングを変更して、3つのクラスの違いを確認してください。
例
例
<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
注：これらのクラスは、フレックスアイテムの単一行には影響しません。
例
例
<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">Flex item 1</div>
<div class="p-2 border
align-self-start">Flex item 2</div>
<div
class="p-2 border">Flex item 3</div>
</div>
レスポンシブフレックスクラス
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |