Flex Utilities

On this page

# Flex

The flex utility controls how flex items grow and shrink.

ClassProperties
--flex-allflex: 1 1 0%;
--flex-autoflex: 1 1 auto;
--flex-initialflex: 0 1 auto;
--flex-noneflex: none;

# Direction

The flex direction utility controls the direction of flex items.

ClassProperties
--flex-rowflex-direction: row;
--flex-row-reverseflex-direction: row-reverse;
--flex-columnflex-direction: column;
--flex-column-reverseflex-direction: column-reverse;

# Grow

The flex grow utility controls how flex items grow.

ClassProperties
--flex-grow-0flex-grow: 0;
--flex-growflex-grow: 1;

# Order

The flex order utility controls the order of flex items.

ClassProperties
--flex-order-1order: 1;
--flex-order-2order: 2;
--flex-order-3order: 3;
--flex-order-4order: 4;
--flex-order-5order: 5;
--flex-order-6order: 6;
--flex-order-7order: 7;
--flex-order-8order: 8;
--flex-order-9order: 9;
--flex-order-10order: 10;
--flex-order-11order: 11;
--flex-order-12order: 12;
--flex-order-firstorder: -9999;
--flex-order-lastorder: 9999;
--flex-order-0order: 0;

# Shrink

The flex shrink utility controls how flex items shrinks.

ClassProperties
--flex-shrink-0flex-shrink: 0;
--flex-shrinkflex-shrink: 1;

# Wrap

The flex wrap utility controls how flex items wrap.

ClassProperties
--flex-wrapflex-wrap: wrap;
--flex-wrap-reverseflex-wrap: wrap-reverse;
--flex-nowrapflex-wrap: nowrap;

# Alignment

You can change the alignments of flex rows and items by using the following alignment utilities:

# Align Content

The align content utility controls how flex rows are positioned vertically inside the flex containers. This utility is used on the flex containers themselves.

ClassProperties
--content-aroundalign-content: space-around;
--content-betweenalign-content: space-between;
--content-centeralign-content: center;
--content-endalign-content: flex-end;
--content-evenlyalign-content: space-evenly;
--content-startalign-content: flex-start;

# Align Items

The align items utility controls how flex items are positioned vertically inside flex containers. This utility is used on the flex containers themselves.

ClassProperties
--items-baselinealign-items: baseline;
--items-centeralign-items: center;
--items-endalign-items: flex-end;
--items-startalign-items: flex-start;
--items-stretchalign-items: stretch;

# Align Self

The align self utility controls how flex items are positioned vertically inside flex containers or rows. This utility is used on the flex items themselves.

ClassProperties
--self-autoalign-self: auto;
--self-centeralign-self: center;
--self-endalign-self: flex-end;
--self-startalign-self: flex-start;
--self-stretchalign-self: stretch;

# Justify Content

The justify content utility controls how flex rows are positioned horizontally inside the flex containers. This utility is used on the flex containers themselves.

ClassProperties
--justify-aroundjustify-content: space-around;
--justify-betweenjustify-content: space-between;
--justify-centerjustify-content: center;
--justify-endjustify-content: flex-end;
--justify-evenlyjustify-content: space-evenly;
--justify-startjustify-content: flex-start;

# Justify Items

The justify items utility controls how flex items are positioned horizontally inside flex containers. This utility is used on the flex containers themselves.

ClassProperties
--justify-items-autojustify-items: auto;
--justify-items-centerjustify-items: center;
--justify-items-endjustify-items: end;
--justify-items-startjustify-items: start;
--justify-items-stretchjustify-items: stretch;

# Justify Self

The justify self utility controls how flex items are positioned horizontally inside flex containers or rows. This utility is used on the flex items themselves.

ClassProperties
--justify-self-autojustify-self: auto;
--justify-self-centerjustify-self: center;
--justify-self-endjustify-self: flex-end;
--justify-self-startjustify-self: flex-start;
--justify-self-stretchjustify-self: stretch;