Bootstrap5 Flex（フレックス）レイアウト
Bootstrap5 は flex クラスを使用してページのレイアウトを制御します。
フレックスボックス(flexbox)
Bootstrap 3 と Bootstrap 4/5 の最大の違いは、Bootstrap 4/5 がフロートを使用せず、フレックスボックスを使用してレイアウトすることです。
フレックスボックスは CSS3 の新しいレイアウトモードであり、レスポンシブデザインに適しています。flex についてまだ理解していない場合は、以下のチュートリアルを参照してください。CSS3 フレックスボックス(Flex Box)チュートリアル
注意: IE9 およびそれ以前のバージョンはフレックスボックスに対応していないため、IE8-9 との互換性が必要な場合は、次を使用してください。Bootstrap 3。
次の例では、d-flex クラスを使用してフレックスボックスコンテナを作成し、3 つのフレックス子要素を設定しています。
例
試してみる »
同じ行に表示されるフレックスボックスコンテナを作成するには、d-inline-flex クラスを使用できます。
例
試してみる »
水平方向
.flex-rowフレックス子要素を水平方向に表示するように設定できます。これがデフォルトです。
使用.flex-row-reverseクラスは右寄せ表示を設定するために使用され、つまり.flex-row方向が逆になります。
例
試してみる »
垂直方向
.flex-columnクラスはフレックス子要素を垂直方向に表示するために使用され、.flex-column-reverse子要素を反転させるために使用します。
例
試してみる »
コンテンツの配置
.justify-content-*クラスはフレックス子要素の配置方法を変更するために使用され、** に指定できる値は次のとおりです。start (デフォルト)、end、center、between または around:
例
試してみる »
等幅
.flex-fill クラスは、各フレックス子要素の幅を強制的に同じに設定します。
例
試してみる »
拡張
.flex-grow-1 は、子要素が残りのスペースを使用するように設定します。次の例では、最初の2つの子要素は必要なスペースのみを設定し、最後の1つが残りのスペースを取得します。
例
試してみる »
ヒント:使用.flex-shrink-1子要素の収縮ルールを設定するために使用します。
並び順
.orderクラスはフレックス子要素の並び順を設定でき、から.order-1 到 .order-12、数値が低いほど優先度が高くなります(.order-1は.order-2の前) :
例
試してみる »
外側の余白
.ms-autoクラスは子要素の右外側の余白を設定できます。auto、つまりmargin-right: auto!important;，.me-autoクラスは子要素の左外側の余白を設定できます。auto、つまりmargin-left: auto!important;:
例
試してみる »
折り返し
フレックスコンテナ内の子要素の折り返しには、次の3つのクラスを使用できます: .flex-nowrap (デフォルト)、.flex-wrap、または .flex-wrap-reverse。flex コンテナを単一行または複数行に設定します。
例
試してみる »
コンテンツの整列
.align-content-* を使用して、垂直方向に子要素をどのように積み重ねるかを制御できます。含まれる値は次のとおりです: .align-content-start (デフォルト)、.align-content-end、.align-content-center、.align-content-between、.align-content-around、および .align-content-stretch。
これらのクラスは、フレックス子要素が1行だけの場合は効果がありません。
例
試してみる »
子要素の整列
単一行の子要素の整列を設定する場合は、次を使用できます。.align-items-*クラスを使用して制御します。含まれる値は次のとおりです。.align-items-start、.align-items-end、.align-items-center、.align-items-baseline、および .align-items-stretch (デフォルト)。
例
試してみる »
特定の子要素の整列
特定の子要素の整列を設定するには、.align-self-* クラスを使用して制御できます。含まれる値は次のとおりです: .align-self-start、.align-self-end、.align-self-center、.align-self-baseline、および .align-self-stretch (デフォルト)。
例
試してみる »
レスポンシブ flex クラス
異なるデバイスに応じて flex クラスを設定することで、ページのレスポンシブレイアウトを実現できます。次の表の * に指定できる値は、sm、md、lg、または xl で、それぞれ小型デバイス、中型デバイス、大型デバイス、超大型デバイスに対応します。| 类 | 例 | 実装 |
|---|---|---|
| フレックスコンテナ | ||
.d-*-flex |
異なる画面デバイスに応じてフレックスボックスコンテナを作成する | 試してみる |
.d-*-inline-flex |
異なる画面デバイスに応じてインラインフレックスボックスコンテナを作成する | 試してみる |
| 方向 | ||
.flex-*-row |
異なる画面デバイスに応じてフレックス子要素を水平方向に表示する | 試してみる |
.flex-*-row-reverse |
異なる画面デバイスに応じてフレックス子要素を水平方向に表示し、右寄せにする | 試してみる |
.flex-*-column |
異なる画面デバイスに応じてフレックス子要素を垂直方向に表示する | 試してみる |
.flex-*-column-reverse |
異なる画面デバイスに応じてフレックス子要素を垂直方向に表示し、方向を逆にする | 試してみる |
| コンテンツの整列 | ||
.justify-content-*-start |
異なる画面デバイスに応じて、開始位置にフレックス子要素を表示します (左寄せ) | 試してみる |
.justify-content-*-end |
異なる画面デバイスに応じて、末尾にフレックス子要素を表示します (右寄せ) | 試してみる |
.justify-content-*-center |
異なる画面デバイスに応じて、flex コンテナ内で子要素を中央に表示します | 試してみる |
.justify-content-*-between |
異なる画面デバイスに応じて、"between" を使用してフレックス子要素を表示します | 試してみる |
.justify-content-*-around |
異なる画面デバイスに応じて、"around" を使用してフレックス子要素を表示します | 試してみる |
| 等幅 | ||
.flex-*-fill |
異なる画面デバイスに応じて等幅を強制する | 試してみる |
| 拡張 | ||
.flex-*-grow-0 |
異なる画面デバイスでは拡張を設定しない | |
.flex-*-grow-1 |
異なる画面デバイスで拡張を設定する | |
| 収縮 | ||
.flex-*-shrink-0 |
異なる画面デバイスでは収縮を設定しない | |
.flex-*-shrink-1 |
異なる画面デバイスで収縮を設定する | |
| 折り返し | ||
.flex-*-nowrap |
異なる画面デバイスでは要素の折り返しを設定しない | 試してみる |
.flex-*-wrap |
異なる画面デバイスで要素の折り返しを設定する | 試してみる |
.flex-*-wrap-reverse |
異なる画面デバイスで要素の折り返しを反転する | 試してみる |
| コンテンツの配置 | ||
.align-content-*-start |
異なる画面デバイスに応じて、開始位置に要素を積み重ねる | 試してみる |
.align-content-*-end |
異なる画面デバイスに応じて、終了位置に要素を積み重ねる | 試してみる |
.align-content-*-center |
異なる画面デバイスに応じて、中央に要素を積み重ねる | 試してみる |
.align-content-*-around |
異なる画面デバイスに応じて、"around" を使用して要素を積み重ねる | 試してみる |
.align-content-*-stretch |
異なる画面デバイスに応じて、要素を伸長して積み重ねる | 試してみる |
| 並び順 | ||
.order-*-0-12 |
小さい画面サイズで並び順を変更 | 試してみる |
| 要素の配置 | ||
.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 |
さまざまな画面デバイスに応じて、単一の子要素を伸ばします。 | 試してみる |