Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Flex (フレックス)

レスポンシブな flexbox ユーティリティを使って、グリッドカラム、ナビゲーション、コンポーネントなどをレイアウト、整列、サイズ調整をすばやく設定できます。より複雑な実装の場合は、カスタム CSS が必要になる場合があります。

目次

Enable flex behaviors

display クラスを適用して flexbox コンテナを作成し、直下の子要素 を flex アイテムに変換します。フレックスコンテナとアイテムは、フレックスプロパティを追加することでさらに変更することができます。

I'm a flexbox container!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
I'm an inline flexbox container!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

.d-flex の他に .d-inline-flex というバリエーションもあります。

Direction

ディレクションユーティリティを使ってフレックスアイテムの向きを設定します。ほとんどのブラウザでデフォルトは row なので、ここでは水平クラスを省略できます。しかし、この値を明示的に設定する必要があるかもしれません(レスポンシブレイアウトで切り替える場合など)。

水平方向(デフォルト)を設定するには .flex-row、反対側から水平方向を開始するには .flex-row-reverse を使用します。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

垂直方向を設定するには .flex-column、下から開始するには .flex-column-reverse を使用します。

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

flex-direction にもレスポンシブユーティリティがあります。

Justify content

justify-content ユーティリティを使用して、フレックスアイテムの主軸(flex-direction: column の場合は x 軸を始点とし、y 軸)上の配置を変更します。start (デフォルト)、endcenterbetweenaroundevenly から選択できます。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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>
<div class="d-flex justify-content-evenly">...</div>

justify-content にもレスポンシブユーティリティがあります。

Align items

align-item ユーティリティを使用して、フレックスアイテムのクロス軸(flex-direction: column の場合は x 軸を始点とし、y 軸)上の配置を変更します。startendcenterbaselinestretch (デフォルト) から選択できます。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<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-items にもレスポンシブユーティリティがあります。

Align self

align-self ユーティリティを使用して、フレックスアイテムのクロス軸(flex-direction: column の場合は x 軸を始点とし、y 軸)上の配置を個別に変更します。startendcenterbaselinestretch (デフォルト) から選択できます。

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

align-self にもレスポンシブユーティリティがあります。

Fill

兄弟要素に .flex-fill を適用すると、利用可能な水平スペースをすべて使って、それらの要素をコンテンツと同じ幅(コンテンツがボーダーボックスを超えていない場合は同じ幅)に強制的に配置します。

Flex item with a lot of content
Flex item
Flex item
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

flex-fill にもレスポンシブユーティリティがあります。

Grow and shrink

.flex-grow-* ユーティリティを使うと、フレックスアイテムが利用可能なスペースを埋めるように伸長するかどうかを切り替えることができます。下の例では、.flex-grow-1 要素は利用可能なスペースをすべて使い、残りの 2 つのフレックスアイテムは必要なスペースを確保しています。

Flex item
Flex item
Third flex item
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

必要に応じてフレックスアイテムの縮小を切り替えるには .flex-shrink-* ユーティリティを利用します。下の例では、.flex-shrink-1 を指定した 2 番目のフレックスアイテムは、.w-100 を指定した前のフレックスアイテムのためのスペースを確保するために “縮小” して内容を改行するように強制されています。

Flex item
Flex item
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

flex-grow、‘flex-shrink’ にもレスポンシブユーティリティがあります。

Auto margins

Flexbox は、フレックスの配置と auto margin を組み合わせると非常に便利です。以下に示すのは、auto margin でフレックスアイテムを制御する 3 つの例です: デフォルト(auto margin なし)、2 アイテムを右寄せ (.MR-auto)、2 アイテムを左寄せ (.ml-auto)。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

With align-items

align-itemsflex-direction: columnmargin-top: automargin-bottom: auto を組み合わせて、フレックスアイテムをコンテナの上部または下部に垂直に配置できます。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Wrap

フレックスアイテムの折り返しを変更します。デフォルトは .flex-nowrap で全く折り返しなし、.flex-wrap で折り返し、.flex-wrap-reverse で逆方向でかつ折り返しを設定できます。

Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-nowrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex flex-wrap-reverse">
  ...
</div>

flex-warp にもレスポンシブユーティリティがあります。

Order

order ユーティリティでフレックスアイテムの見栄え上の順番を変更します。アイテムを最初か最後にするオプションと、DOM の順序を使用するためのリセットのみを提供しています。order は 0 から 5 までの任意の整数値を取るので、必要に応じてカスタム CSS を追加してください。

First flex item
Second flex item
Third flex item
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

order にもレスポンシブユーティリティがあります。

さらに、レスポンシブな .order-first.order-last クラスもあり、これを適用することで要素の order を変更することができます。-1order. これはそれぞれ order: -1order: 6を適用して要素のorder` を変更します。

Align content

フレックスコンテナ上の align-content ユーティリティを使用して、フレックスアイテムをクロス軸上に全体的に揃えることができます。start (デフォルト)、endcenterbetweenaroundstretch から選択します。ここでは、デモのために flex-wrap: wrap を指定しフレックスアイテムの数を増やしています。

注意 このプロパティは、フレックスアイテムの単一行には影響しません。

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-stretch flex-wrap">...</div>

align-content にもレスポンシブユーティリティがあります。