Flex Wrap

Utilities for controlling how flex items wrap.

Class	Properties
.flex-wrap	flex-wrap: wrap;
.flex-nowrap	flex-wrap: nowrap;

Wrap

Use .flex-wrap to allow flex items to wrap.

1

2

3

Don't wrap

Use .flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.

1

2

3

Responsive

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

1

2

3

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.