Class reference

Don’t wrap Default

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

Wrap normally

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

Wrap reversed

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

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.

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

all

sm

md

lg

xl

Customizing

Responsive and State Variants

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

You can control which variants are generated for the flex-wrap utilities by modifying the flexbox property in the modules section of your Tailwind config file.

For example, this config will also generate hover and focus variants:

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex-wrap utilities.

Disabling

If you don’t plan to use the flex-wrap utilities in your project, you can disable them entirely by setting the flexbox property to false in the modules section of your config file:

Note that modifying the flexbox property will affect which variants are generated for all Flexbox utilities, not just the flex-wrap utilities.