Flex Grow

Utilities for controlling how flex items grow.

Class	Properties
.flex-grow-1	flex-grow: 1;
.flex-grow-0	flex-grow: 0;

Grow

Use .flex-grow-1 to allow a flex item to grow to fill any available space.

Content that cannot flex

Item that will grow

Content that cannot flex

Don't grow

Use .flex-grow-0 to allow a flex item to grow to fill any available space.

Will grow

Will not grow

Will grow

Responsive

To control how a flex item grows at a specific breakpoint, add @{breakpoint} add the end of the utility class.

One

Two

Three

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.