Flex Wrap

Utilities for controlling the wrapping behavior of flex items within a container.

Class Name	CSS Equivalent
flex-nowrap	flex-wrap: nowrap;
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;

Flex No Wrap

The .flex-nowrap class sets the flex-wrap property to nowrap, preventing flex items from wrapping onto the next line.

<div class="flex flex-nowrap gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Flex Wrap

The .flex-wrap class sets the flex-wrap property to wrap, allowing flex items to wrap onto the next line if there's not enough space.

<div class="flex flex-wrap gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Flex Wrap Reverse

The .flex-wrap-reverse class sets the flex-wrap property to wrap-reverse, allowing flex items to wrap onto the next line in reverse order if there's not enough space.

<div class="flex flex-wrap-reverse gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3