Flex, Grow, & Shrink

Utilities for setting an object's flex, grow, and shrink flex properties.

Flex

The flex property is a shorthand property for flex-grow, flex-shrink, and flex-basis properties. You can also control the grow and shrink flex values separately with their own utility classes.

Class Output Description
.d-fl0 flex: 0 auto !important; Set an item's flex-basis to auto and flex-grow and flex-shrink values to 0.
.d-fl1 flex: 1 auto !important; Set an item's flex-basis to auto and flex-grow and flex-shrink values to 1.
.d-fl2 flex: 2 auto !important; Set an item's flex-basis to auto and flex-grow and flex-shrink values to 2.
.d-fl3 flex: 3 auto !important; Set an item's flex-basis to auto and flex-grow and flex-shrink values to 3.
.d-fl4 flex: 4 auto !important; Set an item's flex-basis to auto and flex-grow and flex-shrink values to 4.
.d-fl5 flex: 5 auto !important; Set an item's flex-basis to auto and flex-grow and flex-shrink values to 5.
.d-fl-unset flex: unset; Resets the flex value to the initial value (0 1 auto).

Flex Grow

The flex-grow sets the flex container’s grow factor relative to the parent's main size. The default value is 0.

Class Output Description
.d-fl-grow0 flex-grow: 0 !important; Set an item's flex grow property to 0.
.d-fl-grow1 flex-grow: 1 !important; Set an item's flex grow property to 1.
.d-fl-grow2 flex-grow: 2 !important; Set an item's flex grow property to 2.
.d-fl-grow3 flex-grow: 3 !important; Set an item's flex grow property to 3.
.d-fl-grow4 flex-grow: 4 !important; Set an item's flex grow property to 4.
.d-fl-grow5 flex-grow: 5 !important; Set an item's flex grow property to 5.
.d-fl-grow-unset flex-grow: unset !important; Resets the flex-grow value to the initial value (0).

Flex Shrink

The flex-shrink sets the flex container’s shrink factor relative to the parent's main size. The default value is 1.

Class Output Description
.d-fl-shrink0 flex-shrink: 0 !important; Set an item's flex shrink property to 0.
.d-fl-shrink1 flex-shrink: 1 !important; Set an item's flex shrink property to 1.
.d-fl-shrink2 flex-shrink: 2 !important; Set an item's flex shrink property to 2.
.d-fl-shrink3 flex-shrink: 3 !important; Set an item's flex shrink property to 3.
.d-fl-shrink4 flex-shrink: 4 !important; Set an item's flex shrink property to 4.
.d-fl-shrink5 flex-shrink: 5 !important; Set an item's flex shrink property to 5.
.d-fl-shrink-unset flex-shrink: unset !important; Resets the flex-shrink value to the initial value (1).