CSS flexbox is a vital feature to develop the frontend, there are three wraps available in CSS so in tailwind CSS all the properties are covered as in class form. It is the alternative of CSS flex-wrap Property for fast development of front-end.
Note: To activate the flex-wrap you have to include the flex class in your element before the flex-wrap class.
1. flex-wrap
The flex-wrap class allows flex items to wrap onto multiple lines when they do not fit within the available space of the flex container.
Syntax:
<element class="flex flex-wrap"> Contents... </element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Tailwind flex-wrap Class</title>
<link href=
"https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css"
rel="stylesheet">
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS flex-wrap Class</b>
<div id="main" class="ml-24 h-28 w-2/3 flex flex-wrap
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
2. flex-nowrap
The flex-nowrap class prevents flex items from wrapping onto multiple lines. The flex items remain on a single line and may overflow the container if there is not enough space.
Syntax:
<element class="flex flex-nowrap"> Contents... </element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Tailwind CSS flex-nowrap Class</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS flex-nowrap Class</b>
<div id="main"
class="ml-24 h-28 w-2/3 flex flex-nowrap
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
3. flex-wrap-reverse:
The flex-wrap-reverse class allows flex items to wrap onto multiple lines in the reverse direction.
Syntax:
<element class="flex flex-wrap-reverse"> Contents... </element>Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>Tailwind CSS flex-wrap-reverse Class</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS flex-wrap-reverse Class</b>
<div id="main"
class="ml-24 h-28 w-2/3 flex flex-wrap-reverse
bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-24 h-12">1</div>
<div class="bg-green-800 w-24 h-12">2</div>
<div class="bg-green-700 w-24 h-12">3</div>
<div class="bg-green-600 w-24 h-12">4</div>
<div class="bg-green-500 w-24 h-12">5</div>
<div class="bg-green-400 w-24 h-12">6</div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->