Flex wrap

Utilities for controlling how flex items wrap


Class reference

ClassProperties
flex-nowrapflex-wrap: nowrap;
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;

Don’t wrap

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

1
2
3
<div class="flex **flex-nowrap**">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Wrap normally

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

1
2
3
<div class="flex **flex-wrap**">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Wrap reversed

Use .flex-wrap-reverse to wrap flex items in the reverse direction:

1
2
3
<div class="flex **flex-wrap-reverse**">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Responsive

To control how flex items wrap at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:flex-wrap-reverse to apply the flex-wrap-reverse utility at only medium screen sizes and above.

<div class="flex flex-wrap **md:flex-wrap-reverse** ...">
<!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.