# Flex
レスポンシブなflexboxユーティリティを使用して、位置合わせ、均等割付などを行い、フレックスコンテナのレイアウトを制御します。
# Flexboxの有効化
display
ユーティリティを使用すると、任意の要素をフレックスボックスコンテナに変換して、直接の子要素をフレックスアイテムに変換できます。 追加の flex プロパティユーティリティを使用すると、それらの操作をさらにカスタマイズできます。
また、さまざまなブレークポイントに基づいて適用する flex ユーティリティをカスタマイズすることもできます。
- .d-flex
- .d-inline-flex
- .d-sm-flex
- .d-sm-inline-flex
- .d-md-flex
- .d-md-inline-flex
- .d-lg-flex
- .d-lg-inline-flex
- .d-xl-flex
- .d-xl-inline-flex
# Flex direction (アイテムの方向と向き)
デフォルトでは、 d-flex
は flex-direction: row
を適用し、通常は省略できます。 しかし、明示的に定義する必要がある場合があります。
flex-column
および flex-column-reverse
ユーティリティクラスを使用して、フレックスボックスコンテナの向きを変更できます。 IE11 と Safari は列方向に問題があることに注意してください。
また、 flex-direction
にはレスポンシブなバリエーションもあります。
- .flex-row
- .flex-row-reverse
- .flex-column
- .flex-column-reverse
- .flex-sm-row
- .flex-sm-row-reverse
- .flex-sm-column
- .flex-sm-column-reverse
- .flex-md-row
- .flex-md-row-reverse
- .flex-md-column
- .flex-md-column-reverse
- .flex-lg-row
- .flex-lg-row-reverse
- .flex-lg-column
- .flex-lg-column-reverse
- .flex-xl-row
- .flex-xl-row-reverse
- .flex-xl-column
- .flex-xl-column-reverse
# Flex justify (均等割り付け)
justify-content
の flex 設定は、Flex justifyクラスを使用して変更できます。 デフォルトでは x 軸 x-axis上の flexbox アイテムを変更しますが、flex-direction: column
を使用すると逆になり、y 軸 y-axisを変更します。 start
(ブラウザのデフォルト), end
, center
, space-between
, space-around
から選択します。
justify-content
のレスポンシブバリエーションもあります。
- .justify-start
- .justify-end
- .justify-center
- .justify-space-between
- .justify-space-around
- .justify-sm-start
- .justify-sm-end
- .justify-sm-center
- .justify-sm-space-between
- .justify-sm-space-around
- .justify-md-start
- .justify-md-end
- .justify-md-center
- .justify-md-space-between
- .justify-md-space-around
- .justify-lg-start
- .justify-lg-end
- .justify-lg-center
- .justify-lg-space-between
- .justify-lg-space-around
- .justify-xl-start
- .justify-xl-end
- .justify-xl-center
- .justify-xl-space-between
- .justify-xl-space-around
# Flex align
align-items
の flex 設定は flex align クラスを使用して変更できます。 デフォルトでは y 軸 y-axis上の flexbox アイテムを変更しますが、flex-direction: column
を使用すると逆になり、x 軸 x-axisを変更します。 start
, end
, center
, baseline
, stretch
(ブラウザのデフォルト) から選択します。
IE11でflex alignを使用する場合、「min-height」では不十分であり、望ましくない結果が生じるため、明示的な「height」を設定する必要があります。
align-items
にはレスポンシブなバリエーションもあります:
- .align-start
- .align-end
- .align-center
- .align-baseline
- .align-stretch
- .align-sm-start
- .align-sm-end
- .align-sm-center
- .align-sm-baseline
- .align-sm-stretch
- .align-md-start
- .align-md-end
- .align-md-center
- .align-md-baseline
- .align-md-stretch
- .align-lg-start
- .align-lg-end
- .align-lg-center
- .align-lg-baseline
- .align-lg-stretch
- .align-xl-start
- .align-xl-end
- .align-xl-center
- .align-xl-baseline
- .align-xl-stretch
# Flex align self
align-self
flex 設定は、flex align-self クラスを使用して変更できます。 デフォルトでは x 軸 x-axis上の flexbox アイテムを変更しますが、flex-direction: column
を使用すると逆になり、y 軸 y-axisを変更します。 start
, end
, center
, baseline
, auto
, stretch
(ブラウザのデフォルト) から選択します。
align-self-items
にはレスポンシブなバリエーションもあります。
- .align-self-start
- .align-self-end
- .align-self-center
- .align-self-baseline
- .align-self-auto
- .align-self-stand
- .align-self-sm-start
- .align-self-sm-end
- .align-self-sm-center
- .align-self-sm-baseline
- .align-self-sm-auto
- .align-self-sm-stretch
- .align-self-md-start
- .align-self-md-end
- .align-self-md-center
- .align-self-md-baseline
- .align-self-md-auto
- .align-self-md-stretch
- .align-self-lg-start
- .align-self-lg-end
- .align-self-lg-center
- .align-self-lg-baseline
- .align-self-lg-auto
- .align-self-lg-stretch
- .align-self-xl-start
- .align-self-xl-end
- .align-self-xl-center
- .align-self-xl-baseline
- .align-self-xl-auto
- .align-self-xl-stretch
# Auto margins
flexbox コンテナのmarginヘルパークラスを使用すると、flex-row
またはflex-column
をそれぞれ使用するときに、x-axisまたはy-axisでのフレックスアイテムの配置を制御できます。
IE11 は、デフォルト以外の justify-content
値のある親を持つフレックスアイテムの自動マージンを適切にサポートしていません。 こちらの StackOverflow answer を参照してください。
# Using align-items
flex-direction: column
とalign-items
を組み合わせると、 .mt-auto
と.mb-auto
ヘルパークラスを利用してflexアイテムの位置を調整できます。
# Flex wrap
デフォルトでは .d-flex
はラッピングを提供しません ( 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-nowrap
- .flex-wrap
- .flex-wrap-reverse
これらのヘルパークラスは flex-{breakpoint}-{condition}
形式で適用することもでき、ブレークポイントに基づき、よりレスポンシブなバリエーションを作成します。 次の組み合わせが使用できます:
- .flex-sm-nowrap
- .flex-sm-wrap
- .flex-sm-wrap-reverse
- .flex-md-nowrap
- .flex-md-wrap
- .flex-md-wrap-reverse
- .flex-lg-nowrap
- .flex-lg-wrap
- .flex-lg-wrap-reverse
- .flex-xl-nowrap
- .flex-xl-wrap
- .flex-xl-wrap-reverse
# Flexの順序
order
ユーティリティを使用して、フレックス項目の視覚的な順序を変更することができます。
order
のレスポンシブバリエーションもあります。
- .order-first
- .order-0
- .order-1
- .order-2
- .order-3
- .order-4
- .order-5
- .order-6
- .order-7
- .order-8
- .order-9
- .order-10
- .order-11
- .order-12
- .order-last
- .order-sm-first
- .order-sm-0
- .order-sm-1
- .order-sm-2
- .order-sm-3
- .order-sm-4
- .order-sm-5
- .order-sm-6
- .order-sm-7
- .order-sm-8
- .order-sm-9
- .order-sm-10
- .order-sm-11
- .order-sm-12
- .order-sm-last
- .order-md-first
- .order-md-0
- .order-md-1
- .order-md-2
- .order-md-3
- .order-md-4
- .order-md-5
- .order-md-6
- .order-md-7
- .order-md-8
- .order-md-9
- .order-md-10
- .order-md-11
- .order-md-12
- .order-md-last
- .order-lg-first
- .order-lg-0
- .order-lg-1
- .order-lg-2
- .order-lg-3
- .order-lg-4
- .order-lg-5
- .order-lg-6
- .order-lg-7
- .order-lg-8
- .order-lg-9
- .order-lg-10
- .order-lg-11
- .order-lg-12
- .order-lg-last
- .order-lg-first
- .order-xl-0
- .order-xl-1
- .order-xl-2
- .order-xl-3
- .order-xl-4
- .order-xl-5
- .order-xl-6
- .order-xl-7
- .order-xl-8
- .order-xl-9
- .order-xl-10
- .order-xl-11
- .order-xl-12
- .order-xl-last
# Flex align content
align-content
の flex 設定は、flex align-content クラスを使用して変更できます。 デフォルトでは x 軸 x-axis上の flexbox アイテムを変更しますが、flex-direction: column
を使用すると逆になり、y 軸 y-axisを変更します。 start
(ブラウザのデフォルト),end
, center
, between
, around
, stretch
から選択します。
align-content
のレスポンシブなバリエーションもあります。
- align-content-start
- align-content-end
- align-content-center
- align-content-space-between
- align-content-space-around
- align-content-stretch
- align-sm-content-start
- align-sm-content-end
- align-sm-content-center
- align-sm-content-space-between
- align-sm-content-space-around
- align-sm-content-stretch
- align-md-content-start
- align-md-content-end
- align-md-content-center
- align-md-content-space-between
- align-md-content-space-around
- align-md-content-stretch
- align-lg-content-start
- align-lg-content-end
- align-lg-content-center
- align-lg-content-space-between
- align-lg-content-space-around
- align-lg-content-stretch
- align-xl-content-start
- align-xl-content-end
- align-xl-content-center
- align-xl-content-space-between
- align-xl-content-space-around
- align-xl-content-stretch
# Flex grow and shrink
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 occurring whereas 1
will permit the condition. The following classes are available:
- flex-grow-0
- flex-grow-1
- flex-shrink-0
- flex-shrink-1
これらのヘルパークラスは flex-{breakpoint}-{condition}-{state}
形式で適用することもでき、ブレークポイントに基づき、よりレスポンシブなバリエーションを作成します。 次の組み合わせが使用できます:
- flex-sm-grow-0
- flex-md-grow-0
- flex-lg-grow-0
- flex-xl-grow-0
- flex-sm-grow-1
- flex-md-grow-1
- flex-lg-grow-1
- flex-xl-grow-1
- flex-sm-shrink-0
- flex-md-shrink-0
- flex-lg-shrink-0
- flex-xl-shrink-0
- flex-sm-shrink-1
- flex-md-shrink-1
- flex-lg-shrink-1
- flex-xl-shrink-1