The flex-wrap class in Tailwind CSS allows you to manage how items within a Flexbox container are wrapped when there’s not enough space to fit them all on one line.
By default, Flexbox items are laid out on a single line and may overflow the container if there isn’t enough space to accommodate them.
Note: You must include the flex class before adding the flex-wrap class to an element otherwise it won’t work.
Tailwind Flex Wrap Classes
There are three utility classes for controlling the wrapping behavior of flex containers.
| Classes | Overview |
| flex-wrap | This class sets the flex-wrap property of a flex container to wrap |
| flex-nowrap | This class sets the flex-wrap property of a flex container to nowrap |
| flex-wrap-reverse | This class sets the flex-wrap property of a flex container to wrap-reverse |
Tailwind flex wrap
This class allows items to wrap onto multiple lines as needed, to prevent them from overflowing the container.
Syntax
<element class="flex flex-wrap"> Contents....</element>
In this example, we go through a practical implementation of flex-wrap class in Tailwind:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-3 text-slate-800">flex-wrap class in Tailwind CSS</p>
<div id="main" class="ml-24 h-28 w-3/4 flex flex-wrap
bg-gray-100 border-solid border
border-gray-600 font-medium text-gray-50">
<div class="bg-amber-900 w-32 h-12">1st</div>
<div class="bg-amber-800 w-32 h-12">2nd</div>
<div class="bg-amber-700 w-32 h-12">3rd</div>
<div class="bg-amber-600 w-32 h-12">4th</div>
<div class="bg-amber-500 w-32 h-12">5th</div>
</div>
</body>
</html>
Tailwind flex-nowrap
This value ensures that all items are placed in a single line, even if it causes them to overflow the container.
Syntax
<element class="flex flex-nowrap"> Contents....</element>
In the following example, the usage of flex-nowrap is demonstrated for better understanding:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-3 text-slate-800">flex-nowrap class in Tailwind CSS</p>
<div id="main" class="ml-24 h-28 w-3/4 flex flex-nowrap
bg-gray-100 border-solid border
border-gray-600 font-medium text-gray-50">
<div class="bg-amber-900 w-32 h-12">1st</div>
<div class="bg-amber-800 w-32 h-12">2nd</div>
<div class="bg-amber-700 w-32 h-12">3rd</div>
<div class="bg-amber-600 w-32 h-12">4th</div>
<div class="bg-amber-500 w-32 h-12">5th</div>
</div>
</body>
</html>
Tailwind flex-wrap-reverse
It wraps the items onto multiple lines, but in reverse order. So, if the items were originally laid out in rows from left to right, they will now be laid out in columns from bottom to top.
Syntax
<element class="flex flex-wrap-reverse"> Contents....</element>
This example provides a practical demonstration of how to use the flex-wrap-reverse class in Tailwind CSS:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold my-3 text-slate-800">flex-wrap-reverse class in Tailwind CSS</p>
<div id="main" class="ml-24 h-28 w-3/4 flex flex-wrap-reverse
bg-gray-100 border-solid border
border-gray-600 font-medium text-gray-50">
<div class="bg-amber-900 w-32 h-12">1st</div>
<div class="bg-amber-800 w-32 h-12">2nd</div>
<div class="bg-amber-700 w-32 h-12">3rd</div>
<div class="bg-amber-600 w-32 h-12">4th</div>
<div class="bg-amber-500 w-32 h-12">5th</div>
</div>
</body>
</html>
