Skip to main content

​
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.

​
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.

​
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.

​
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.

​
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.

Flex

Start with the base flex container utility

Flex Direction

Control row and column flow