Flexbox with Tailwind CSS 4 – Flex Container & Flex Items
Flexbox is one of the most powerful layout systems in modern CSS. It allows developers to create responsive and flexible layouts easily.
Tailwind CSS provides utility classes that make working with Flexbox extremely simple.
In this tutorial you will learn:
- What is a flex container
- What are flex items
- How to use Tailwind flex utilities
- How to control flex growth and shrinking
- Practical layout examples using Tailwind CSS 4 CDN
We will use the Tailwind browser CDN for this tutorial.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS 4 CDN
Create a basic HTML file and include the Tailwind CDN.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Flexbox with Tailwind CSS
</h1>
</body>
</html>
Now you can start using Tailwind classes.
Understanding Flexbox in Tailwind
In Flexbox there are two main concepts:
1. Flex Container
The parent element that contains flex items.
In Tailwind you create it using:
flex
Example:
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
2. Flex Items
All child elements inside the flex container automatically become flex items.
These items can grow, shrink, or stay fixed depending on the flex utilities applied.
Basic Flex Layout Example
<div class="flex gap-4">
<div class="bg-blue-500 text-white p-4">
Item 1
</div>
<div class="bg-green-500 text-white p-4">
Item 2
</div>
<div class="bg-red-500 text-white p-4">
Item 3
</div>
</div>
Result:
- Items appear horizontally
- Spacing is controlled using
gap-4
Flex Utilities in Tailwind
Tailwind provides utilities to control how flex items grow and shrink.
| Class | CSS |
|---|---|
| flex-1 | flex: 1 |
| flex-auto | flex: auto |
| flex-initial | flex: 0 auto |
| flex-none | flex: none |
Example 1 – flex-1 (Grow & Shrink)
flex-1 allows an item to grow and shrink as needed.
<div class="flex gap-4">
<div class="w-14 bg-blue-500 text-white p-4 flex-none">
01
</div>
<div class="w-64 bg-green-500 text-white p-4 flex-1">
02
</div>
<div class="w-32 bg-red-500 text-white p-4 flex-1">
03
</div>
</div>
Explanation:
- Item 01 keeps its width
- Item 02 and 03 expand to fill available space
Example 2 – flex-initial
flex-initial allows the element to shrink but not grow.
<div class="flex gap-4">
<div class="w-14 bg-blue-500 text-white p-4 flex-none">
01
</div>
<div class="w-64 bg-green-500 text-white p-4 flex-initial">
02
</div>
<div class="w-32 bg-red-500 text-white p-4 flex-initial">
03
</div>
</div>
Items maintain their original width but can shrink if needed.
Example 3 – flex-auto
flex-auto allows the item to grow and shrink while respecting initial size.
<div class="flex gap-4">
<div class="w-14 bg-blue-500 text-white p-4 flex-none">
01
</div>
<div class="w-64 bg-green-500 text-white p-4 flex-auto">
02
</div>
<div class="w-32 bg-red-500 text-white p-4 flex-auto">
03
</div>
</div>
Both items adapt dynamically based on available space.
Example 4 – flex-none
flex-none prevents the item from growing or shrinking.
<div class="flex gap-4">
<div class="w-14 bg-blue-500 text-white p-4 flex-none">
01
</div>
<div class="w-32 bg-green-500 text-white p-4 flex-none">
02
</div>
<div class="bg-red-500 text-white p-4 flex-1">
03
</div>
</div>
Explanation:
- Items 01 and 02 stay fixed
- Item 03 fills remaining space
Using Custom Flex Values
Tailwind also allows custom flex values.
Example:
<div class="flex">
<div class="flex-[3_1_auto] bg-blue-500 text-white p-4">
Custom Flex
</div>
<div class="flex-1 bg-green-500 text-white p-4">
Normal Flex
</div>
</div>
Here:
flex: 3 1 auto
Meaning:
- Grow factor: 3
- Shrink factor: 1
- Base size: auto
Using CSS Variables with Flex
You can also define flex using CSS variables.
<div class="flex-(--my-flex) bg-blue-500 text-white p-4">
Flex using variable
</div>
This is shorthand for:
flex-[var(--my-flex)]
Responsive Flex Example
Tailwind allows responsive flex behavior using breakpoints.
Example:
<div class="flex-none md:flex-1 bg-blue-500 text-white p-4">
Responsive Flex Item
</div>
Explanation:
- On small screens →
flex-none - On medium screens and above →
flex-1
This helps create responsive layouts easily.
Practical Example – Card Layout
<div class="flex gap-6 bg-gray-100 p-6">
<div class="flex-none w-32 bg-blue-500 text-white p-6 rounded-lg">
Sidebar
</div>
<div class="flex-1 bg-white p-6 rounded-lg shadow">
Main Content
</div>
</div>
Result:
- Sidebar fixed width
- Content expands automatically
This is a common dashboard layout pattern.
Why Use Flexbox with Tailwind?
Benefits include:
Faster UI Development
Tailwind utilities eliminate writing custom CSS.
Responsive Layouts
Flex utilities work well with breakpoints.
Clean Code
No complex CSS rules needed.
Perfect for Modern UI
Dashboards, cards, navbars, and layouts become easier to build.
FAQs
1. What is flex in Tailwind CSS?
The flex class makes an element a flex container, enabling Flexbox layout for its child elements.
Example:
<div class="flex"></div>
2. What does flex-1 mean in Tailwind?
flex-1 means the item can grow and shrink to fill available space.
3. What is the difference between flex-auto and flex-1?
| Utility | Behavior |
|---|---|
| flex-1 | Ignores initial size |
| flex-auto | Respects initial size |
4. Can I use Flexbox with Tailwind CDN?
Yes. Flexbox utilities work perfectly with the Tailwind CDN version.
5. When should I use flex-none?
Use flex-none when you want an element to keep its original size without growing or shrinking.
Example:
<div class="flex-none"></div>
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.