Sections

Flex grow and shrink

Utilities for controlling how flex items grow and shrink.

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

Usage

Grow

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

Use .flex-grow-0 to prevent a flex item from growing.

Shrink

Use .flex-shrink to allow a flex item to shrink if required.

Use .flex-shrink-0 to prevent a flex item from shrinking.