Tailwind CSS - Flex Wrap


Tailwind CSS Flex Wrap is a utility class that specifies how flex items wrap within its container. This class specifies whether flex items wrap to a new line or not.

Tailwind CSS Flex Wrap Classes

The following is the list of Tailwind CSS Flex Wrap classes that specifies the wrapping behavior of flex items.

Class CSS Properties
flex-wrap flex-wrap: wrap;
flex-wrap-reverse flex-wrap: wrap-reverse;
flex-nowrap flex-wrap: nowrap;

Functionality of Tailwind CSS Flex Wrap

  • flex-wrap: This class replaces the CSS flex-wrap: wrap; property. This class enables flex items to be wrapped onto multiple lines.
  • flex-wrap-reverse: This class replaces the CSS flex-wrap: wrap-reverse; property. This class enables flex items to be wrapped in a reverse direction.
  • flex-nowrap: This class replaces the CSS flex-wrap: nowrap; property. This class doesn't allow flex items to be wrapped.

Tailwind CSS Flex Wrap Class Examples

The following examples will illustrate the Tailwind CSS Flex Wrap class utility.

Tailwind CSS Flex Wrap

The below example illustrates the use of flex-wrap class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Wrap Class
    </h2>
    <div class="flex flex-wrap 
                bg-gray-200 h-48 border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

Tailwind CSS Flex Nowrap

The below example illustrates the use of flex-nowrap class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Nowrap Class
    </h2>
    <div class="flex flex-nowrap bg-gray-200 h-48 
                border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>

Tailwind CSS Flex Wrap Reverse Class

The below example illustrates the use of flex-wrap-reverse class.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Flex Wrap Reverse Class
    </h2>
    <div class="flex flex-wrap-reverse bg-gray-200 h-48 
                border-2 border-black">
        
        <div class="bg-green-600 p-4 w-1/2">
            Item 1
        </div>
        <div class="bg-green-500 p-4 w-1/2">
            Item 2
        </div>
        <div class="bg-green-400 p-4 w-1/2">
            Item 3
        </div>
        <div class="bg-green-300 p-4 w-1/2">
            Item 4
        </div>
        <div class="bg-green-200 p-4 w-1/2">
            Item 5
        </div>
        <div class="bg-green-100 p-4 w-1/2">
            Item 6
        </div>
    </div>
</body>

</html>