The Tailwind CSS flex utilities control how a flex item grows, shrinks, or uses available space inside a flex container. First, create a flex container using the flex class:
Syntax:
<div class="flex"><!-- flex items go here --></div>
The elements inside this container are called flex items. Tailwind provides different flex-* utilities to control how these items use the available space.
1. flex-<number>
The flex-<number> utility lets you control how much flexible space an item gets compared to other items. Think of flex-<number> as: "Give me a proportional share of the available space."
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind flex-1 and flex-2</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">
<!--Driver Code Ends-->
<div class="flex w-full gap-4">
<div class="flex-1 bg-green-800 p-6 text-center text-white"> flex-1 </div>
<div class="flex-2 bg-green-900 p-6 text-center text-white"> flex-2 </div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
2. flex-<fraction>
The flex-<fraction> utility lets you use fractions to give an item a specific portion of the available space. Think of flex-<fraction> as: "Give me this fraction of the container's available space."
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind flex-1/2</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">
<!--Driver Code Ends-->
<div class="flex w-full">
<div class="flex-1/2 bg-green-800 p-6 text-center text-white"> 1/2 </div>
<div class="flex-1/2 bg-green-900 p-6 text-center text-white"> 1/2 </div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
3. flex-auto
The flex-auto utility allows an item to grow and shrink, while also taking its original size into account. Think of flex-auto as: "Use my normal size as a starting point, but let me grow or shrink when needed."
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind flex-auto</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">
<!--Driver Code Ends-->
<div class="flex w-full gap-4">
<div class="flex-auto bg-green-800 p-6 text-white"> Item 1 </div>
<!--Driver Code Starts-->
<div class="flex-auto bg-green-900 p-6 text-white"> Item 2 </div>
</div>
</body>
</html>
<!--Driver Code Ends-->
4. flex-initial
The flex-initial utility allows an item to shrink, but it does not allow the item to grow beyond its normal size. Think of flex-initial as: "Keep my normal size, but allow me to become smaller if necessary."
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind flex-initial</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">
<!--Driver Code Ends-->
<div class="flex w-full gap-4">
<div class="flex-initial w-64 bg-green-800 p-6 text-white"> Can shrink </div>
<div class="flex-1 bg-green-900 p-6 text-white"> Takes remaining space </div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
5. flex-none
The flex-none utility prevents an item from growing or shrinking. Think of flex-none as: "Don't change my size."
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind flex-none</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">
<!--Driver Code Ends-->
<div class="flex w-full gap-4">
<div class="flex-none w-24 bg-green-800 p-6 text-white">
Fixed
</div>
<div class="flex-1 bg-green-900 p-6 text-white">
Takes remaining space
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
6. flex-(<custom-property>)
The flex-(<custom-property>) syntax lets you use a CSS custom property as the flex value. You can think of it as: "Get my flex value from this CSS variable."
For example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Custom Flex Property</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<!--Driver Code Ends-->
<style>
:root {
--my-flex: 2 1 auto;
}
</style>
</head>
<body class="bg-gray-100 p-10">
<div class="flex w-full gap-4">
<div class="flex-1 bg-green-800 p-6 text-white"> Normal Flex </div>
<div class="flex-(--my-flex) bg-green-900 p-6 text-white"> Custom Flex Property </div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
7. flex-[<value>]
The flex-[<value>] syntax allows you to provide your own custom flex value. Think of flex-[<value>] as: "I want to write my own value for the CSS flex property." It is useful when the predefined Tailwind classes don't give you exactly what you need.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind Custom Flex Value</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="bg-gray-100 p-10">
<div class="flex w-full gap-4">
<div class="flex-[3_1_auto] bg-green-800 p-6 text-white"> Custom Flex </div>
<div class="flex-1 bg-green-900 p-6 text-white"> flex-1 </div>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Quick Comparison
| Tailwind Class | CSS Value | What it does |
|---|---|---|
flex-1 | flex: 1 | Shares available space |
flex-2 | flex: 2 | Gets twice the flexible share of flex-1 |
flex-1/2 | flex: calc(1/2 * 100%) | Uses 50% as its flex basis |
flex-auto | flex: auto | Can grow and shrink while considering its original size |
flex-initial | flex: 0 auto | Keeps its natural size but can shrink |
flex-none | flex: none | Does not grow or shrink |
flex-(--my-flex) | flex: var(--my-flex) | Uses the value stored in a CSS variable |
flex-[3_1_auto] | flex: 3 1 auto | Uses a completely custom flex value |