Flex

displayユーティリティを使用すると、任意の要素を Flexbox コンテナに変換し、直接の子要素 をフレックスアイテムに変換することができます。追加のflexプロパティを使用すると、その相互作用をさらにカスタマイズできます。

また、さまざまなブレークポイントに基づいて適用する flex ユーティリティをカスタマイズすることもできます。

デフォルトでは、'd-flex' は flex-direction: row が適用され、通常は省略できます。ただし、明示的に定義する必要がある場合もあります。

flex-columnおよびflex-column-reverseユーティリティクラスを使用して、フレックスボックスコンテナの向きを変更できます。IE11とSafariは、列の方向に問題がある可能性がありますので注意してください。

また、flex-directionにはレスポンシブなバリエーションもあります。

The justify-content flex setting can be changed using the flex justify classes. This by default will modify the flexbox items on the x-axis but is reversed when using flex-direction: column, modifying the y-axis. Choose from start (browser default), end, center, between, or around.

There are also responsive variations for justify-content.

align-itemsフレックス設定はflex alignクラスを使用して変更できます。これはデフォルトで y-axis のフレックスボックスアイテムを変更しますが、 flex-direction: columnを使用すると逆にx-axisに変更されます。 整列位置は start, end, center, baseline または stretch (ブラウザのデフォルト) から指定します。

There are also responsive variations for align-items.

The align-self flex setting can be changed using the flex align-self classes. This by default will modify the flexbox items on the x-axis but is reversed when using flex-direction: column, modifying the y-axis. Choose from start, end, center, baseline, auto, or stretch (browser default).

There are also responsive variations for align-self-items.

Flexbox コンテナのマージンヘルパー クラスを使用すると、 flex-row または flex-column をそれぞれ使用する場合に、x-axis または y-axis 上のフレックス アイテムの位置を制御できます。

flex-direction: columnとalign-itemsを組み合わせると、 .mt-autoと.mb-autoヘルパークラスを利用してflexアイテムの位置を調整できます。

By default .d-flex does not provide any wrapping (behaves similarly to flex-wrap: nowrap). This can be modified by applying flex-wrap helper classes in the format flex-{condition} where condition can be nowrap, wrap, or wrap-reverse.

これらのヘルパークラスは、flex-{breakpoint}-{condition} の形式で適用して、ブレークポイントに基づいて、よりレスポンシブなバリエーションを作成することもできます。次の組み合わせを使用できます:

order ユーティリティを使用して、フレックスの表示順序を変更できます。

また、orderにはレスポンシブなバリエーションもあります。

The align-content flex setting can be changed using the flex align-content classes. This by default will modify the flexbox items on the x-axis but is reversed when using flex-direction: column, modifying the y-axis. Choose from start (browser default), end, center, between, around or stretch.

There are also responsive variations for align-content.

Vuetify has helper classes for applying grow and shrink manually. These can be applied by adding the helper class in the format flex-{condition}-{value}, where condition can be either grow or shrink and value can be either 0 or 1. The condition grow will permit an element to grow to fill available space, whereas shrink will permit an element to shrink down to only the space needs for its contents. However, this will only happen if the element must shrink to fit their container such as a container resize or being effected by a flex-grow-1. The value 0 will prevent the condition from occuring whereas 1 will permit the condition. The following classes are available:

These helper classes can also be applied in the format flex-{breakpoint}-{condition}-{state} to create more responsive variations based on breakpoints. The following combinations are available: