Flex

Используя утилиту display, вы можете превратить любой элемент в контейнер flexbox, превращая ** прямые дочерние элементы ** в flex элементы. Используя дополнительные утилиты flex-свойства, вы можете настроить их взаимодействие еще больше.

Вы также можете настроить flex утилиты для применения на основе различных точек останова.

По умолчанию, d-flex применяется с flex-direction: row и, как правило, не используется. Тем не менее, могут быть ситуации, когда вам нужно явно определить его.

Вспомогательные классы flex-column иflex-column-reverse могут использоваться для изменения ориентации flexbox контейнера. Имейте в виду, что ** IE11 ** и ** Safari ** могут иметь проблемы с column direction.

Есть также адаптивные варианты для '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.

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

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.

Using the margin helper classes in a flexbox container, you can control the positioning of flex items on the x-axis or y-axis when using flex-row or flex-column respectively.

Mixing flex-direction: column and align-items, you can utilize .mt-auto and .mb-auto helper classes to adjust flex item positioning.

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.

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

You can change the visual order of flex items with the order utilities.

There are also responsive variations for 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: