ūü•≥
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale ūüéĀ Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off ūüéČ
postImage

How to use Tailwind CSS Flex

blogImage

By Emmanuel Chinonso

Technical Writer

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.

ClassProperties
Flex-1flex: 1 1 0%
Flex-autoflex: 1 1 auto
Flex-initialflex: 0 1 auto
Flex-noneflex: 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

1<element class = ‚ÄĚflex-1‚ÄĚ>Contents‚Ķ..</element>

Code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>flex effect</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13    <h1 class="text-center text-purple-500 text-5xl font-bold">
14        DEVWARES
15    </h1>
16    <div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
17        <div class="flex m-2 text-white">
18            <div class="bg-purple-600 flex-1">Effect of flex-1</div>
19        </div>
20    </div>
21</body>
22
23</html>

The code above shows the effect of the flex-1 classes in Tailwind.

Your webpage should look like the image below.

Tailwind CSS Flex

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

1<element class = ‚ÄĚflex-auto‚ÄĚ>Contents‚Ķ..</element>

Code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>flex effect</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13    <h1 class="text-center text-purple-500 text-5xl font-bold">
14        DEVWARES
15    </h1>
16    <div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
17        <div class="flex m-2 text-white">
18            <div class="bg-purple-600 flex-auto">Effect of flex-auto</div>
19        </div>
20    </div>
21</body>
22
23</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.

Tailwind CSS Flex

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

1<element class = ‚ÄĚflex-initial‚ÄĚ>Contents‚Ķ..</element>

Code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>flex effect</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13    <h1 class="text-center text-purple-500 text-5xl font-bold">
14        DEVWARES
15    </h1>
16    <div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
17        <div class="flex m-2 text-white">
18            <div class="bg-purple-600 flex-initial">Effect of flex-initial</div>
19        </div>
20    </div>
21</body>
22
23</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.

Tailwind CSS Flex

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

1<element class =‚ÄĚflex-none‚ÄĚ>‚Ķ..</element>

Code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>flex effect</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13    <h1 class="text-center text-purple-500 text-5xl font-bold">
14        DEVWARES
15    </h1>
16    <div class="bg-purple-100 border-4 border-purple-300 w-2/3 ml-32">
17        <div class="flex m-2 text-white">
18            <div class="bg-purple-600 flex-none">Effect of flex-none</div>
19        </div>
20    </div>
21</body>
22
23</html>

The code above shows the effect of the flex-none class.

The effect will look like the image below on our webpage

Tailwind CSS Flex

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.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...