---
meta:
  title: Flex
  description: Flex helper classes allow you to modify flexbox parents and children.
  keywords: flex helper classes, flex classes, vuetify flex
related:
  - /styles/display/
  - /components/grids/
  - /styles/css-reset/
features:
  report: true
---

# Flex

Control the layout of flex containers with alignment, justification and more with responsive flexbox utilities.

<PageFeatures />

| Class | Properties |
| - | - |
| **d-flex** | display: flex; |
| **d-inline-flex** | display: inline-flex; |
| **d-sm-flex** | display: flex; |
| **d-sm-inline-flex** | display: inline-flex; |
| **d-md-flex** | display: flex; |
| **d-md-inline-flex** | display: inline-flex; |
| **d-lg-flex** | display: flex; |
| **d-lg-inline-flex** | display: inline-flex; |
| **d-xl-flex** | display: flex; |
| **d-xl-inline-flex** | display: inline-flex; |
| **flex-fill** | flex: 1 1 auto; |
| **flex-sm-fill** | flex: 1 1 auto; |
| **flex-md-fill** | flex: 1 1 auto; |
| **flex-lg-fill** | flex: 1 1 auto; |
| **flex-xl-fill** | flex: 1 1 auto; |
| **flex-1-1** | flex: 1 1 auto; |
| **flex-sm-1-1** | flex: 1 1 auto; |
| **flex-md-1-1** | flex: 1 1 auto; |
| **flex-lg-1-1** | flex: 1 1 auto; |
| **flex-xl-1-1** | flex: 1 1 auto; |
| **flex-1-0** | flex: 1 0 auto; |
| **flex-sm-1-0** | flex: 1 0 auto; |
| **flex-md-1-0** | flex: 1 0 auto; |
| **flex-lg-1-0** | flex: 1 0 auto; |
| **flex-xl-1-0** | flex: 1 0 auto; |
| **flex-0-1** | flex: 0 1 auto; |
| **flex-sm-0-1** | flex: 0 1 auto; |
| **flex-md-0-1** | flex: 0 1 auto; |
| **flex-lg-0-1** | flex: 0 1 auto; |
| **flex-xl-0-1** | flex: 0 1 auto; |
| **flex-0-0** | flex: 0 0 auto; |
| **flex-sm-0-0** | flex: 0 0 auto; |
| **flex-md-0-0** | flex: 0 0 auto; |
| **flex-lg-0-0** | flex: 0 0 auto; |
| **flex-xl-0-0** | flex: 0 0 auto; |
| **flex-1-1-0** | flex: 1 1 0%; |
| **flex-sm-1-1-0** | flex: 1 1 0%; |
| **flex-md-1-1-0** | flex: 1 1 0%; |
| **flex-lg-1-1-0** | flex: 1 1 0%; |
| **flex-xl-1-1-0** | flex: 1 1 0%; |
| **flex-1-1-100** | flex: 1 1 100%; |
| **flex-sm-1-1-100** | flex: 1 1 100%; |
| **flex-md-1-1-100** | flex: 1 1 100%; |
| **flex-lg-1-1-100** | flex: 1 1 100%; |
| **flex-xl-1-1-100** | flex: 1 1 100%; |
| **flex-1-0-0** | flex: 1 0 0%; |
| **flex-sm-1-0-0** | flex: 1 0 0%; |
| **flex-md-1-0-0** | flex: 1 0 0%; |
| **flex-lg-1-0-0** | flex: 1 0 0%; |
| **flex-xl-1-0-0** | flex: 1 0 0%; |
| **flex-1-0-100** | flex: 1 0 100%; |
| **flex-sm-1-0-100** | flex: 1 0 100%; |
| **flex-md-1-0-100** | flex: 1 0 100%; |
| **flex-lg-1-0-100** | flex: 1 0 100%; |
| **flex-xl-1-0-100** | flex: 1 0 100%; |
| **flex-0-1-0** | flex: 0 1 0%; |
| **flex-sm-0-1-0** | flex: 0 1 0%; |
| **flex-md-0-1-0** | flex: 0 1 0%; |
| **flex-lg-0-1-0** | flex: 0 1 0%; |
| **flex-xl-0-1-0** | flex: 0 1 0%; |
| **flex-0-1-100** | flex: 0 1 100%; |
| **flex-sm-0-1-100** | flex: 0 1 100%; |
| **flex-md-0-1-100** | flex: 0 1 100%; |
| **flex-lg-0-1-100** | flex: 0 1 100%; |
| **flex-xl-0-1-100** | flex: 0 1 100%; |
| **flex-0-0-0** | flex: 0 0 0% |
| **flex-sm-0-0-0** | flex: 0 0 0% |
| **flex-md-0-0-0** | flex: 0 0 0% |
| **flex-lg-0-0-0** | flex: 0 0 0% |
| **flex-xl-0-0-0** | flex: 0 0 0% |
| **flex-0-0-100** | flex: 0 0 100%; |
| **flex-sm-0-0-100** | flex: 0 0 100%; |
| **flex-md-0-0-100** | flex: 0 0 100%; |
| **flex-lg-0-0-100** | flex: 0 0 100%; |
| **flex-xl-0-0-100** | flex: 0 0 100%; |
| **ga-0** | gap: 0; |
| **ga-1** | gap: 4px; |
| **ga-2** | gap: 8px; |
| **ga-3** | gap: 12px; |
| **ga-4** | gap: 16px; |
| **ga-5** | gap: 20px; |
| **ga-6** | gap: 24px; |
| **ga-7** | gap: 28px; |
| **ga-8** | gap: 32px; |
| **ga-9** | gap: 36px; |
| **ga-10** | gap: 40px; |
| **ga-11** | gap: 44px; |
| **ga-12** | gap: 48px; |
| **ga-13** | gap: 52px; |
| **ga-14** | gap: 56px; |
| **ga-15** | gap: 60px; |
| **ga-16** | gap: 64px; |
| **ga-sm-0** | gap: 0; |
| **ga-sm-1** | gap: 4px; |
| **ga-sm-2** | gap: 8px; |
| **ga-sm-3** | gap: 12px; |
| **ga-sm-4** | gap: 16px; |
| **ga-sm-5** | gap: 20px; |
| **ga-sm-6** | gap: 24px; |
| **ga-sm-7** | gap: 28px; |
| **ga-sm-8** | gap: 32px; |
| **ga-sm-9** | gap: 36px; |
| **ga-sm-10** | gap: 40px; |
| **ga-sm-11** | gap: 44px; |
| **ga-sm-12** | gap: 48px; |
| **ga-sm-13** | gap: 52px; |
| **ga-sm-14** | gap: 56px; |
| **ga-sm-15** | gap: 60px; |
| **ga-sm-16** | gap: 64px; |
| **ga-md-0** | gap: 0; |
| **ga-md-1** | gap: 4px; |
| **ga-md-2** | gap: 8px; |
| **ga-md-3** | gap: 12px; |
| **ga-md-4** | gap: 16px; |
| **ga-md-5** | gap: 20px; |
| **ga-md-6** | gap: 24px; |
| **ga-md-7** | gap: 28px; |
| **ga-md-8** | gap: 32px; |
| **ga-md-9** | gap: 36px; |
| **ga-md-10** | gap: 40px; |
| **ga-md-11** | gap: 44px; |
| **ga-md-12** | gap: 48px; |
| **ga-md-13** | gap: 52px; |
| **ga-md-14** | gap: 56px; |
| **ga-md-15** | gap: 60px; |
| **ga-md-16** | gap: 64px; |
| **ga-lg-0** | gap: 0; |
| **ga-lg-1** | gap: 4px; |
| **ga-lg-2** | gap: 8px; |
| **ga-lg-3** | gap: 12px; |
| **ga-lg-4** | gap: 16px; |
| **ga-lg-5** | gap: 20px; |
| **ga-lg-6** | gap: 24px; |
| **ga-lg-7** | gap: 28px; |
| **ga-lg-8** | gap: 32px; |
| **ga-lg-9** | gap: 36px; |
| **ga-lg-10** | gap: 40px; |
| **ga-lg-11** | gap: 44px; |
| **ga-lg-12** | gap: 48px; |
| **ga-lg-13** | gap: 52px; |
| **ga-lg-14** | gap: 56px; |
| **ga-lg-15** | gap: 60px; |
| **ga-lg-16** | gap: 64px; |
| **ga-xl-0** | gap: 0; |
| **ga-xl-1** | gap: 4px; |
| **ga-xl-2** | gap: 8px; |
| **ga-xl-3** | gap: 12px; |
| **ga-xl-4** | gap: 16px; |
| **ga-xl-5** | gap: 20px; |
| **ga-xl-6** | gap: 24px; |
| **ga-xl-7** | gap: 28px; |
| **ga-xl-8** | gap: 32px; |
| **ga-xl-9** | gap: 36px; |
| **ga-xl-10** | gap: 40px; |
| **ga-xl-11** | gap: 44px; |
| **ga-xl-12** | gap: 48px; |
| **ga-xl-13** | gap: 52px; |
| **ga-xl-14** | gap: 56px; |
| **ga-xl-15** | gap: 60px; |
| **ga-xl-16** | gap: 64px; |
| **flex-row** | flex-direction: row; |
| **flex-row-reverse** | flex-direction: row-reverse; |
| **flex-column** | flex-direction: column; |
| **flex-column-reverse** | flex-direction: column-reverse; |
| **flex-sm-row** | flex-direction: row; |
| **flex-sm-row-reverse** | flex-direction: row-reverse; |
| **flex-sm-column** | flex-direction: column; |
| **flex-sm-column-reverse** | flex-direction: column-reverse; |
| **flex-md-row** | flex-direction: row; |
| **flex-md-row-reverse** | flex-direction: row-reverse; |
| **flex-md-column** | flex-direction: column; |
| **flex-md-column-reverse** | flex-direction: column-reverse; |
| **flex-lg-row** | flex-direction: row; |
| **flex-lg-row-reverse** | flex-direction: row-reverse; |
| **flex-lg-column** | flex-direction: column; |
| **flex-lg-column-reverse** | flex-direction: column-reverse; |
| **flex-xl-row** | flex-direction: row; |
| **flex-xl-row-reverse** | flex-direction: row-reverse; |
| **flex-xl-column** | flex-direction: column; |
| **flex-xl-column-reverse** | flex-direction: column-reverse; |
| **justify-start** | justify-content: flex-start; |
| **justify-end** | justify-content: flex-end; |
| **justify-center** | justify-content: center; |
| **justify-space-between** | justify-content: space-between; |
| **justify-space-around** | justify-content: space-around; |
| **justify-space-evenly** | justify-content: space-evenly; |
| **justify-sm-start** | justify-content: flex-start; |
| **justify-sm-end** | justify-content: flex-end; |
| **justify-sm-center** | justify-content: center; |
| **justify-sm-space-between** | justify-content: space-between; |
| **justify-sm-space-around** | justify-content: space-around; |
| **justify-sm-space-evenly** | justify-content: space-evenly; |
| **justify-md-start** | justify-content: flex-start; |
| **justify-md-end** | justify-content: flex-end; |
| **justify-md-center** | justify-content: center; |
| **justify-md-space-between** | justify-content: space-between; |
| **justify-md-space-around** | justify-content: space-around; |
| **justify-md-space-evenly** | justify-content: space-evenly; |
| **justify-lg-start** | justify-content: flex-start; |
| **justify-lg-end** | justify-content: flex-end; |
| **justify-lg-center** | justify-content: center; |
| **justify-lg-space-between** | justify-content: space-between; |
| **justify-lg-space-around** | justify-content: space-around; |
| **justify-lg-space-evenly** | justify-content: space-evenly; |
| **justify-xl-start** | justify-content: flex-start; |
| **justify-xl-end** | justify-content: flex-end; |
| **justify-xl-center** | justify-content: center; |
| **justify-xl-space-between** | justify-content: space-between; |
| **justify-xl-space-around** | justify-content: space-around; |
| **justify-xl-space-evenly** | justify-content: space-evenly; |
| **align-start** | align-items: flex-start; |
| **align-end** | align-items: flex-end; |
| **align-center** | align-items: center; |
| **align-baseline** | align-items: baseline; |
| **align-stretch** | align-items: stretch; |
| **align-sm-start** | align-items: flex-start; |
| **align-sm-end** | align-items: flex-end; |
| **align-sm-center** | align-items: center; |
| **align-sm-baseline** | align-items: baseline; |
| **align-sm-stretch** | align-items: stretch; |
| **align-md-start** | align-items: flex-start; |
| **align-md-end** | align-items: flex-end; |
| **align-md-center** | align-items: center; |
| **align-md-baseline** | align-items: baseline; |
| **align-md-stretch** | align-items: stretch; |
| **align-lg-start** | align-items: flex-start; |
| **align-lg-end** | align-items: flex-end; |
| **align-lg-center** | align-items: center; |
| **align-lg-baseline** | align-items: baseline; |
| **align-lg-stretch** | align-items: stretch; |
| **align-xl-start** | align-items: flex-start; |
| **align-xl-end** | align-items: flex-end; |
| **align-xl-center** | align-items: center; |
| **align-xl-baseline** | align-items: baseline; |
| **align-xl-stretch** | align-items: stretch; |
| **align-self-start** | align-self: flex-start; |
| **align-self-end** | align-self: flex-end; |
| **align-self-center** | align-self: center; |
| **align-self-baseline** | align-self: baseline; |
| **align-self-auto** | align-self: auto; |
| **align-self-stretch** | align-self: stretch; |
| **align-self-sm-start** | align-self: flex-start; |
| **align-self-sm-end** | align-self: flex-end; |
| **align-self-sm-center** | align-self: center; |
| **align-self-sm-baseline** | align-self: baseline; |
| **align-self-sm-auto** | align-self: auto; |
| **align-self-sm-stretch** | align-self: stretch; |
| **align-self-md-start** | align-self: flex-start; |
| **align-self-md-end** | align-self: flex-end; |
| **align-self-md-center** | align-self: center; |
| **align-self-md-baseline** | align-self: baseline; |
| **align-self-md-auto** | align-self: auto; |
| **align-self-md-stretch** | align-self: stretch; |
| **align-self-lg-start** | align-self: flex-start; |
| **align-self-lg-end** | align-self: flex-end; |
| **align-self-lg-center** | align-self: center; |
| **align-self-lg-baseline** | align-self: baseline; |
| **align-self-lg-auto** | align-self: auto; |
| **align-self-lg-stretch** | align-self: stretch; |
| **align-self-xl-start** | align-self: flex-start; |
| **align-self-xl-end** | align-self: flex-end; |
| **align-self-xl-center** | align-self: center; |
| **align-self-xl-baseline** | align-self: baseline; |
| **align-self-xl-auto** | align-self: auto; |
| **align-self-xl-stretch** | align-self: stretch; |
| **flex-sm-nowrap** | flex-wrap: nowrap; |
| **flex-sm-wrap** | flex-wrap: wrap; |
| **flex-sm-wrap-reverse** | flex-wrap: wrap-reverse; |
| **flex-md-nowrap** | flex-wrap: nowrap; |
| **flex-md-wrap** | flex-wrap: wrap; |
| **flex-md-wrap-reverse** | flex-wrap: wrap-reverse; |
| **flex-lg-nowrap** | flex-wrap: nowrap; |
| **flex-lg-wrap** | flex-wrap: wrap; |
| **flex-lg-wrap-reverse** | flex-wrap: wrap-reverse; |
| **flex-xl-nowrap** | flex-wrap: nowrap; |
| **flex-xl-wrap** | flex-wrap: wrap; |
| **flex-xl-wrap-reverse** | flex-wrap: wrap-reverse; |
| **order-first** | order: -1; |
| **order-0** | order: 0; |
| **order-1** | order: 1; |
| **order-2** | order: 2; |
| **order-3** | order: 3; |
| **order-4** | order: 4; |
| **order-5** | order: 5; |
| **order-6** | order: 6; |
| **order-7** | order: 7; |
| **order-8** | order: 8; |
| **order-9** | order: 9; |
| **order-10** | order: 10; |
| **order-11** | order: 11; |
| **order-12** | order: 12; |
| **order-last** | order: 13; |
| **order-sm-first** | order: -1; |
| **order-sm-0** | order: 0; |
| **order-sm-1** | order: 1; |
| **order-sm-2** | order: 2; |
| **order-sm-3** | order: 3; |
| **order-sm-4** | order: 4; |
| **order-sm-5** | order: 5; |
| **order-sm-6** | order: 6; |
| **order-sm-7** | order: 7; |
| **order-sm-8** | order: 8; |
| **order-sm-9** | order: 9; |
| **order-sm-10** | order: 10; |
| **order-sm-11** | order: 11; |
| **order-sm-12** | order: 12; |
| **order-sm-last** | order: 13; |
| **order-md-first** | order: -1; |
| **order-md-0** | order: 0; |
| **order-md-1** | order: 1; |
| **order-md-2** | order: 2; |
| **order-md-3** | order: 3; |
| **order-md-4** | order: 4; |
| **order-md-5** | order: 5; |
| **order-md-6** | order: 6; |
| **order-md-7** | order: 7; |
| **order-md-8** | order: 8; |
| **order-md-9** | order: 9; |
| **order-md-10** | order: 10; |
| **order-md-11** | order: 11; |
| **order-md-12** | order: 12; |
| **order-md-last** | order: 13; |
| **order-lg-first** | order: -1; |
| **order-lg-0** | order: 0; |
| **order-lg-1** | order: 1; |
| **order-lg-2** | order: 2; |
| **order-lg-3** | order: 3; |
| **order-lg-4** | order: 4; |
| **order-lg-5** | order: 5; |
| **order-lg-6** | order: 6; |
| **order-lg-7** | order: 7; |
| **order-lg-8** | order: 8; |
| **order-lg-9** | order: 9; |
| **order-lg-10** | order: 10; |
| **order-lg-11** | order: 11; |
| **order-lg-12** | order: 12; |
| **order-lg-last** | order: 13; |
| **order-xl-first** | order: -1; |
| **order-xl-0** | order: 0; |
| **order-xl-1** | order: 1; |
| **order-xl-2** | order: 2; |
| **order-xl-3** | order: 3; |
| **order-xl-4** | order: 4; |
| **order-xl-5** | order: 5; |
| **order-xl-6** | order: 6; |
| **order-xl-7** | order: 7; |
| **order-xl-8** | order: 8; |
| **order-xl-9** | order: 9; |
| **order-xl-10** | order: 10; |
| **order-xl-11** | order: 11; |
| **order-xl-12** | order: 12; |
| **order-xl-last** | order: 13; |
| **align-content-start** | align-content: flex-start; |
| **align-content-end** | align-content: flex-end; |
| **align-content-center** | align-content: center; |
| **align-content-space-between** | align-content: space-between; |
| **align-content-space-around** | align-content: space-around; |
| **align-content-space-evenly** | align-content: space-evenly; |
| **align-content-stretch** | align-content: stretch; |
| **align-content-sm-start** | align-content: flex-start; |
| **align-content-sm-end** | align-content: flex-end; |
| **align-content-sm-center** | align-content: center; |
| **align-content-sm-space-between** | align-content: space-between; |
| **align-content-sm-space-around** | align-content: space-around; |
| **align-content-sm-space-evenly** | align-content: space-evenly; |
| **align-content-sm-stretch** | align-content: stretch; |
| **align-content-md-start** | align-content: flex-start; |
| **align-content-md-end** | align-content: flex-end; |
| **align-content-md-center** | align-content: center; |
| **align-content-md-space-between** | align-content: space-between; |
| **align-content-md-space-around** | align-content: space-around; |
| **align-content-md-space-evenly** | align-content: space-evenly; |
| **align-content-md-stretch** | align-content: stretch; |
| **align-content-lg-start** | align-content: flex-start; |
| **align-content-lg-end** | align-content: flex-end; |
| **align-content-lg-center** | align-content: center; |
| **align-content-lg-space-between** | align-content: space-between; |
| **align-content-lg-space-around** | align-content: space-around; |
| **align-content-lg-space-evenly** | align-content: space-evenly; |
| **align-content-lg-stretch** | align-content: stretch; |
| **align-content-xl-start** | align-content: flex-start; |
| **align-content-xl-end** | align-content: flex-end; |
| **align-content-xl-center** | align-content: center; |
| **align-content-xl-space-between** | align-content: space-between; |
| **align-content-xl-space-around** | align-content: space-around; |
| **align-content-xl-space-evenly** | align-content: space-evenly; |
| **align-content-xl-stretch** | align-content: stretch; |
| **flex-nowrap** | flex-wrap: nowrap; |
| **flex-wrap** | flex-wrap: wrap; |
| **flex-wrap-reverse** | flex-wrap: wrap-reverse; |
| **flex-grow-0** | flex-grow: 0; |
| **flex-grow-1** | flex-grow: 1; |
| **flex-shrink-0** | flex-shrink: 0; |
| **flex-shrink-1** | flex-shrink: 1; |
| **flex-sm-grow-0** | flex-grow: 0; |
| **flex-md-grow-0** | flex-grow: 0; |
| **flex-lg-grow-0** | flex-grow: 0; |
| **flex-xl-grow-0** | flex-grow: 0; |
| **flex-sm-grow-1** | flex-grow: 1; |
| **flex-md-grow-1** | flex-grow: 1; |
| **flex-lg-grow-1** | flex-grow: 1; |
| **flex-xl-grow-1** | flex-grow: 1; |
| **flex-sm-shrink-0** | flex-shrink: 0; |
| **flex-md-shrink-0** | flex-shrink: 0; |
| **flex-lg-shrink-0** | flex-shrink: 0; |
| **flex-xl-shrink-0** | flex-shrink: 0; |
| **flex-sm-shrink-1** | flex-shrink: 1; |
| **flex-md-shrink-1** | flex-shrink: 1; |
| **flex-lg-shrink-1** | flex-shrink: 1; |
| **flex-xl-shrink-1** | flex-shrink: 1; { style="max-height: 420px;" fixed-header } |

<PromotedEntry />

## Usage

Using `display` utilities you can turn any element into a flexbox container transforming **direct children elements** into flex items. Using additional flex property utilities, you can customize their interaction even further.

<ExamplesExample file="flex/flexbox" />

<ExamplesExample file="flex/flexbox-inline" />

You can also customize flex utilities to apply based upon various breakpoints.

### Caveats

::: info
It is important to note that using any of the display classes above will result in any display style previously added being overwritten. This is because of the classes using `!important` in their display styling.
:::

## Flex shorthand

The flex utility classes can be used to modify the **flex** css property. This makes it easy to position flex items within a flex container.

<ExamplesExample file="flex/flex-flex" />

## Flex direction

By default, `d-flex` applies `flex-direction: row` and can generally be omitted. However, there may be situations where you need to explicitly define it.

<ExamplesExample file="flex/flex-direction" />

The `flex-column` and `flex-column-reverse` utility classes can be used to change the orientation of the flexbox container.

<ExamplesExample file="flex/flex-column" />

## Flex justify

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`, `space-between`, `space-around`, or `space-evenly`.

<ExamplesExample file="flex/flex-justify" />

## Flex align

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).

<ExamplesExample file="flex/flex-align" />

## Flex align self

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

<ExamplesExample file="flex/flex-align-self" />

## Auto margins

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.

<ExamplesExample file="flex/margins" />

### Using align-items

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

<ExamplesExample file="flex/margins-align-items" />

## Flex wrap

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`.

<ExamplesExample file="flex/flex-nowrap" />

<ExamplesExample file="flex/flex-wrap" />

<ExamplesExample file="flex/flex-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:

## Flex order

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

<ExamplesExample file="flex/flex-order" />

## Flex align content

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

<ExamplesExample file="flex/flex-align-content" />

## 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:

<ExamplesExample file="flex/grow-shrink" />

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:
