Flex Wrap

Control whether flex items stay on one line or wrap onto new rows.

Overview

Wrap utilities decide whether flex items stay in a single row or flow onto additional lines. They are especially useful for card collections, tag lists, and horizontally scrollable rails.

Class	CSS	Behavior
.flex-nowrap	flex-wrap: nowrap;	Keep items on one line
.flex-wrap	flex-wrap: wrap;	Let items move to new rows
.flex-wrap-reverse	flex-wrap: wrap-reverse;	Reverse row stacking

No Wrap

.flex-nowrap keeps all items on a single line. Items that overflow the container will scroll horizontally. This is ideal for carousels, horizontal rails, and compact navigation.

<div class="elementor-element flex flex-nowrap gap-4 overflow-auto">
  <div class="padding-6 background-gray-light rounded" style="width: 12rem; flex-shrink: 0;">01</div>
  <div class="padding-6 background-gray-light rounded" style="width: 12rem; flex-shrink: 0;">02</div>
  <div class="padding-6 background-gray-light rounded" style="width: 12rem; flex-shrink: 0;">03</div>
</div>

Wrap

.flex-wrap lets items flow onto new rows when they run out of horizontal space. This is the most common wrap behavior for card grids, tag lists, and any dense row that should gracefully break.

<div class="elementor-element flex flex-wrap gap-6">
  <div class="width-1-3"><div class="card padding-6">01</div></div>
  <div class="width-1-3"><div class="card padding-6">02</div></div>
  <div class="width-1-3"><div class="card padding-6">03</div></div>
</div>

Wrap Reverse

.flex-wrap-reverse wraps items but reverses the stacking order of rows. New rows appear above instead of below. This is helpful when you want bottom-anchored content to push upward.

<div class="elementor-element flex flex-wrap-reverse gap-4">
  <div class="width-1-3 padding-4 background-primary text-white rounded">01</div>
  <div class="width-1-3 padding-4 background-success text-white rounded">02</div>
  <div class="width-1-3 padding-4 background-error text-white rounded">03</div>
</div>

Best Practices

• Use .flex-wrap for dense UI rows that should gracefully move onto another line.
• Use .flex-nowrap for carousels, rails, and compact navigation.
• Pair wrap behavior with gap-* so spacing stays consistent across rows.
• Use the responsive suffix system when wrapping should only change at specific breakpoints, such as flex-wrap--on-m.

Related Utilities

Flex

Start with the base flex container utility

Flex Direction

Control row and column flow