Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Flex Wrap

Quiz

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>

Print Page