Flex Shrink

Utilities for controlling how flex items shrink.

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

Shrink

Use .flex-shrink-1 to allow a flex item to shrink if needed.

Longer content that cannot flex

Item that will shrink even if it causes the content to wrap. Lorem ipsum dolor sit amet consectum.

Longer content that cannot flex

Don't shrink

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

Item that can shrink if needed

Item that cannot shrink below its initial size

Item that can shrink if needed

Responsive

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

Item that can grow or shrink if needed

Responsive flex item

Item that can grow or shrink if needed

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.