Tailwind Flex Property
Here we’ll explore Tailwind flex with examples and show you how to create robust and responsive layouts with Tailwind CSS flex.
Tailwind flex class is used to define the length of flexible items within a container.
It is designed to be responsive and optimized for mobile devices, making it easy to position child elements and the main container.
Additionally, margins within the flex container do not collapse with the content margins.
This class also allows for easy modification of the order of elements without having to edit the HTML code. The flex class serves as an alternative to the CSS flex property.
Remember: The element on which flex class is applied should be part of a flex container (the parent element’s display should be set to flex).
Tailwind flex Classes
| Classes | Overview |
| flex-1 | The flex-1 class is a utility class that sets the flex-grow, flex-shrink, and flex-basis properties of an element to 1. |
| flex-auto | The flex-auto class sets the flex-grow, flex-shrink, and flex-basis properties of an element to 1, 1, and auto, respectively. |
| flex-initial | This class sets the flex-grow, flex-shrink, and flex-basis properties of elements to their initial values which are 0, 1, and auto, respectively. |
| flex-none | A flex-none class sets its flex-grow, flex-shrink, and flex-basis properties to 0, 0, and auto, respectively. |
Tailwind flex-1
This class allows a flex item to grow and shrink as needed, ignoring its initial size.
Syntax
<element class="flex-1"> Contents....</element>
let’s take a closer look at the flex-1 class in Tailwind in below example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="text-center font-semibold my-3 text-slate-800"> flex-1 class in Tailwind CSS</p>
<div id="main" class="bg-gray-100 w-2/3 mx-auto p-3 rounded">
<div class="flex m-2 text-gray-50 font-medium">
<div class="bg-sky-600 text-center rounded-l flex-1 p-2">
MrExamples website
</div>
<div class="bg-sky-500 text-center rounded-r flex-1 p-2">
Tailwind CSS
</div>
</div>
</div>
</body>
</html>
Tailwind flex-auto
This class ensures that the item will grow or shrink as needed to fill available space, while still taking up its natural size initially.
Syntax
<element class="flex-auto">....</element>
This example focuses on exploring the flex-auto class in Tailwind:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="text-center font-semibold my-3 text-slate-800"> flex-auto class in Tailwind CSS</p>
<div id="main" class="bg-gray-100 w-2/3 mx-auto p-3 rounded">
<div class="flex m-2 text-gray-50 font-medium">
<div class="bg-sky-600 text-center rounded-l flex-auto p-2">
MrExamples website
</div>
<div class="bg-sky-500 text-center rounded-r flex-auto p-2">
Tailwind CSS
</div>
</div>
</div>
</body>
</html>
Tailwind flex-initial
Using this class, the item will not grow or shrink and will take up its natural size.
Syntax
<element class="flex-initial"> </element>
The following code snippet practically illustrates the utilization of flex-initial class in Tailwind:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="text-center font-semibold my-3 text-slate-800"> flex-initial class in Tailwind CSS</p>
<div id="main" class="bg-gray-100 w-2/3 mx-auto p-3 rounded">
<div class="flex m-2 text-gray-50 font-medium">
<div class="bg-sky-600 text-center rounded-l flex-initial p-2">
MrExamples website
</div>
<div class="bg-sky-500 text-center rounded-r flex-initial p-2">
Tailwind CSS
</div>
</div>
</div>
</body>
</html>
Tailwind flex-none
Using this class, the item will not grow or shrink and will take up its natural size.
Syntax
<element class="flex-none">....</element>
Here is a brief example of Tailwind’s flex-none class in action:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-center text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="text-center font-semibold my-3 text-slate-800"> flex-none class in Tailwind CSS</p>
<div id="main" class="bg-gray-100 w-2/3 mx-auto p-3 rounded">
<div class="flex m-2 text-gray-50 font-medium">
<div class="bg-sky-600 text-center rounded-l flex-none p-2">
MrExamples website
</div>
<div class="bg-sky-500 text-center rounded-r flex-none p-2">
Tailwind CSS
</div>
</div>
</div>
</body>
</html>
