Tailwind CSS Flex Wrap

flex-wrap is a CSS property that allows you to control how flex items are laid out and wrapped within a flex container when there is not enough space to fit them on a single line. Flex Wrap enables or disables wrapping of flex items within the flex container.

In this page, we will learn about the flex-wrap property in Tailwind CSS with examples.

Syntax

The syntax for using the flex-wrap property in Tailwind CSS is as follows:

<div class="flex flex-wrap <nowrap | wrap | wrap-reverse>"></div>

• flex-wrap is the Tailwind CSS utility class that enables or disables wrapping of flex items within the flex container.
• nowrap specifies that the flex items should not wrap even when there is not enough space available.
• wrap specifies that the flex items should wrap onto multiple lines when there is not enough space available.
• wrap-reverse specifies that the flex items should wrap onto multiple lines in reverse order when there is not enough space available.

Example

Let's take a look at some examples to understand how to use the flex-wrap property in Tailwind CSS.

<div class="flex flex-wrap bg-gray-200">
  <div class="bg-red-500 w-24 h-24 mb-4"></div>
  <div class="bg-blue-500 w-24 h-24 mb-4"></div>
  <<div class="bg-yellow-500 w-24 h-24 mb-4"></div>
  <div class="bg-green-500 w-24 h-24 mb-4"></div>
  <div class="bg-pink-500 w-24 h-24 mb-4"></div>
</div>

In the above example, we have used the flex-wrap property to wrap the flex items onto multiple lines.

Output

The above example will render the following output:

Explanation

In the above example, we have created a flex container by adding the flex class to a div element. We have also added the flex-wrap class to enable wrapping of the flex items.

Inside the flex container, we have added five div elements with different background colors and dimensions using the bg-*, w-*, and h-* Tailwind CSS utility classes.

By default, the flex items would have all been displayed on a single line. However, since we have added the flex-wrap class, the flex items are wrapped onto multiple lines when there is not enough space available.

Use

The flex-wrap property is useful when you want to control how flex items are laid out and wrapped within a flex container when there is not enough space to fit them on a single line.

Important Points

• The default value of the flex-wrap property is nowrap, which means that flex items will not wrap to the next line.
• The wrap value allows flex items to wrap onto multiple lines.
• The wrap-reverse value allows flex items to wrap onto multiple lines in reverse order.

Summary

In this page, we learned about the flex-wrap property in Tailwind CSS, which allows you to control how flex items are laid out and wrapped within a flex container when there is not enough space to fit them on a single line. We saw examples of how to use the flex-wrap property in Tailwind CSS and its different values, including nowrap, wrap, and wrap-reverse.