🤩
Windframe Import update is finally here!
postImage

Tailwind Flex: How to use Tailwind CSS Flex

blogImage

By Emmanuel Chinonso

Technical Writer

What is a FlexBox?

Flexbox is a vital feature used for front-end development. Flexbox is a model used to make a layout of elements in a container. It allows these elements to align and distribute within a given space. The flexbox modal is very much available in Tailwind CSS.

in this Tailwind CSS tutorial, the flexbox 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.

Table of content

  • What is flex in Tailwind
  • Tailwind Flex-1
  • Tailwind Flex-auto
  • Tailwind Flex-initial
  • Tailwind Flex-none
  • Tailwind Css Flex Wrap
  • Tailwind Flex-no-wrap
  • Tailwind Flex direction
  • Tailwind flex row
  • Tailwind Flex row reverse
  • Tailwind Flex column
  • Tailwind Flex column reverse
  • Tailwind Flex grow
  • Conclusion
  • Resources

What is flex in Tailwind

To use Flex in Tailwind, you will need to use the utility classes in different states using variant modifiers. for Example, You use hover:flex-1 to only apply the flex-1 utility hover.

The Tailwind flex class is a better responsive and mobile-friendly feature. We are going to look at the different flex features available in Tailwind CSS with their properties.

ClassProperties
.flex-1flex: 1 1 0%
.flex-autoflex: 1 1 auto
.flex-initialflex: 0 1 auto
.flex-noneflex: none

Tailwind Flex-1

Tailwind Flex-1 is a class that allows items or elements to grow and shrink without considering the initial size. It’s a ratio.

Syntax

js
<element class="”flex-1”">Contents…..</element>

Code:

html
<!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 CSS. The code you have written should look like the image below.

Tailwind CSS Flex

Tailwind Flex-auto

This Tailwind 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

js
<element class="”flex-auto”">Contents…..</element>

Code:

html
<!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 CSS.

You should have the image below on your webpage after the code.

Tailwind CSS Flex

Tailwind Flex-initial

Tailwind flex-initial is a class that 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

js
<element class="”flex-initial”">Contents…..</element>

Code:

html
<!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.

Tailwind CSS Flex

Tailwind Flex-none

Tailwind Flex-none place restrictions on the shrinking or growing of an element if there is extra space. This help to prevent a flex item from growing or shrinking, taking only the space according to the size of the content.

Syntax

js
<element class="”flex-none”">…..</element>

Code:

html
<!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

Tailwind CSS Flex

Tailwind CSS Flex Wrap

These are the utilities for determining how Tailwind flex-wrap works.

ClassProperties
.flex-no-wrapflex-wrap: nowrap;
.flex-wrapflex-wrap: wrap;
.flex-wrap-reverseflex-wrap: wrap-reverse;

Tailwind CSS Flex-no-wrap

This Tailwind class doesn't allow flex items to wrap. This makes these flex items overflow the container. It doesn't regulate flex items to a box. The image below shows example of these

Tailwind CSS Flex

Here is the code for the flex class

html
<div class="flex flex-nowrap bg-gray-200">
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 py-2 rounded-lg">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">3</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">4</div>
</div>
</div>

Tailwind flex-wrap

The Tailwind flex-wrap class allows for your flex elements to be wrapped in a box and provides a great user experience. You can see this on the image below.

Tailwind CSS Flex

Here is the code for flex-wrap below.

html
<div class="flex flex-wrap bg-gray-200">
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 py-2 rounded-lg">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">3</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">4</div>
</div>
</div>

Tailwind flex-wrap-reverse

Flex wrap reverse is a class that reverses the wrap flex items You can see this in the image below

Tailwind CSS Flex

html
<div class="flex flex-wrap-reverse bg-gray-200">
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 py-2 rounded-lg">1</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">2</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">3</div>
</div>
<div class="w-2/5 flex-none p-2">
<div class="text-white text-center bg-blue-600 px-4 py-2 m-2 rounded-lg">4</div>
</div>
</div>

Tailwind Flex direction

ClassProperties
.flex-rowflex-direction: row;
.flex-row-reverseflex-direction: row-reverse
.flex-colflex-direction: column;
.flex-col-reverseflex-direction: column-reverse;

Tailwind flex row

You can use the Tailwind flex row class to position flex items horizontally in the same direction as the text. It is one of the classes of Tailwind flex-direction. You can see this in the image below.

Tailwind CSS Flex

html
<div class="flex flex-row bg-gray-200">
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">1</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">2</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">3</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">4</div>
</div>

Tailwind Flex row reverse

This Tailwind flex row reverses class positions the flex item horizontally in the opposite direction of the text:

Tailwind CSS Flex

html
<div class="flex flex-row-reverse bg-gray-200">
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">1</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">2</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">3</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">4</div>
</div>

Tailwind Flex column

The tailwind flex column is one of the flex-direction classes and its function is to position items vertically on the screen. You can see an example of the code below and its resulting image.

Tailwind CSS Flex

html
<div class="flex flex-col bg-gray-200">
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">1</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">2</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">3</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">4</div>
</div>

Tailwind Flex column reverse

Another important property of the Tailwind flex column is the Tailwind flex column reverse. This uses the .flex-col-reverse class to position flex items vertically in the opposite direction on the screen. You can see the resulting image and the code below.

Tailwind CSS Flex

html
<div class="flex flex-col-reverse bg-gray-200">
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">1</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">2</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">3</div>
<div class="text-white text-center bg-purple-600 px-4 py-2 m-2 rounded-lg">4</div>
</div>

Tailwind Flex grow

This is an important class for controlling how a flex element grows. Tailwind flex-grow has two classes which include tailwind flex-grow and Tailwind flex grow-0. You can use the tailwind flex-grow to control any flex element to grow to fill any available space. while the Tailwind flex grow-0 prevents a flex element from growing to available spaces on the screen.

To use the Tailwind flex-grow property you simply have to add the flex-grow utility to the element you wish to apply it.

Conclusion

Tailwind CSS flex offers a lot of options for really good designs and from what you can see, it's very important when building your projects. We also demonstrated how Tailwind Flex is used to make beautiful designs and position items on your webpage. I hope you find this article insightful.

Resources

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.Download the free react template

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

...