Flex wrap

Utilities for controlling how flex items wrap.

In this article

Class Properties
.flex-wrap flex-wrap: wrap;
.flex-no-wrap flex-wrap: no-wrap;
.flex-wrap-reverse flex-wrap: wrap-reverse;

Usage

No wrapping

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

<div class="row flex-no-wrap bg-gray-200">
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
</div>

Wrap

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

<div class="row flex-wrap bg-gray-200">
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
</div>

Wrap reverse

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

<div class="row flex-wrap-reverse bg-gray-200">
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">1</div>
  </div>
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">2</div>
  </div>
  <div class="col-5 flex-none p-2">
    <div class="text-gray-700 text-center bg-gray-400 p-2">3</div>
  </div>
</div>

Variants

By default, only responsive variants are generated for flex wrap utilities.

Responsive

To control the justification of flex content at a specific breakpoint, add a {screen}: prefix to any existing flex wrap utility.

For example, use .md:flex-wrap to apply the flex-wrap utility at only medium screen sizes and above.

Hover-state

To include hover-state variants like .hover:flex-wrap, add "flex-wrap" to the $hover-variants variable when recompiling your CSS:

$hover-variants: (
  // ...
  "flex-wrap",
);

Questions or feedback about this article? Let us know