Flexbox is a vital feature used for frontend development. This feature is also available in tailwind CSS. Tailwind CSS flex has four properties available to it. The flex property is used to set the length of flexible items. The element that flex is applied to must be flexible for effect.
The Tailwind CSS flex class is a better responsive and mobile-friendly feature. We are going to look at the different flex features available in Tailwind CSS flex with their properties.
Class ------------- properties
flex-1 ------------- flex: 1 1 0%
flex-auto ------------- flex: 1 1 auto
flex-initial ------------- flex: 0 1 auto
flex-none ------------- flex: none
Flex-1
This feature allows items or elements to grow and shrink without considering the initial size. It’s a ratio, of course.
Syntax
<element class = ”flex-1”>Contents…..</element>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="text-center text-purple-500 text-5xl font-bold">
DEVWARES
</h1>
<div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
<div class="flex m-2 text-white">
<div class="bg-purple-600 flex-1">Effect of flex-1</div>
</div>
</div>
</body>
</html>
The code above shows the effect of the flex-1 classes in Tailwind.
Your webpage should look like the image below.
Flex-auto
This Tailwind CSS flex class shows how much an item will grow relative to the content of the flexible items. Here, the initial size is ignored, and it grows and shrinks according to its need.
Syntax
<element class = ”flex-auto”>Contents…..</element>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="text-center text-purple-500 text-5xl font-bold">
DEVWARES
</h1>
<div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
<div class="flex m-2 text-white">
<div class="bg-purple-600 flex-auto">Effect of flex-auto</div>
</div>
</div>
</body>
</html>
In the code above, we demonstrated how to use the flex-auto class in Tailwind.
You should have the image below on your webpage after the code.
Flex-initial
This Tailwind flex specifies how much the item will grow relative to the rest of the flexible items. It is used to allow a flex item to shrink but not grow, considering its initial size.
Syntax
<element class = ”flex-initial”>Contents…..</element>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="text-center text-purple-500 text-5xl font-bold">
DEVWARES
</h1>
<div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
<div class="flex m-2 text-white">
<div class="bg-purple-600 flex-initial">Effect of flex-initial</div>
</div>
</div>
</body>
</html>
The code above shows the effect of the Tailwind CSS flex-initial class. We can see the effect on our webpage.
The webpage should look like the image below.
Flex-none
In this Tailwind CSS flex class, restrictions are placed on the shrinking or growing of an element if there is extra space. These help to prevent a flex item from growing or shrinking, taking only the space according to the size of the content.
Syntax
<element class =”flex-none”>…..</element>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="text-center text-purple-500 text-5xl font-bold">
DEVWARES
</h1>
<div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
<div class="flex m-2 text-white">
<div class="bg-purple-600 flex-none">Effect of flex-none</div>
</div>
</div>
</body>
</html>
The code above shows the effect of the flex-none class.
The effect will look like the image below on our webpage
Conclusion
In today’s Tailwind tutorial, we explored the CSS flex property and the effect of the Tailwind CSS flex class in our projects. We also demonstrated how we could use this effect in our projects. I hope you find this article insightful.
Design and code Tailwind CSS websites 3x faster
We created a tool to visually build tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.Try Windframe out for free.
Top comments (0)