How to use Tailwind CSS flex
Tags: webdev, tailwindcss, css, programming
Published: 2021-10-10 00:22:14

---
title: How to use Tailwind CSS flex
published: true
date: 2021-01-10 01:16:04 UTC
tags: [webdev, tailwindcss, css, programming]
canonical_url: https://www.devwares.com/blog//how-to-use-tailwind-css-flex
cover_image: https://www.devwares.com/blog/images/how-to-use-tailwind-css-flex.png
---

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**

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

Your webpage should look like the image below.

![Tailwind CSS Flex](http://devwares.com/blog/images/tailwind-css-flex-1.png)
 

## 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**

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

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

![Tailwind CSS Flex](http://devwares.com/blog/images/tailwind-css-flex-2.png)
 

## 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**

```html
<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](http://devwares.com/blog/images/tailwind-css-flex-3.png)

## 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**

```html
<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](http://devwares.com/blog/images/tailwind-css-flex-4.png)
 

###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.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)