Flexbox with Tailwind CSS 4 – Complete Guide
Flexbox is one of the most powerful layout systems in modern web development. It allows developers to build flexible and responsive layouts with minimal CSS.
Tailwind CSS makes Flexbox even easier by providing utility classes that directly map to Flexbox properties.
In this guide you will learn:
- Flex container and flex items
- Justify-content utilities
- Align-items utilities
- Flex-direction utilities
- Gap utilities
- Real layout examples
We will use the Tailwind CSS 4 CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a simple HTML file and include Tailwind.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold">
Flexbox with Tailwind CSS
</h1>
</body>
</html>
Now Tailwind utilities are ready to use.
Flex Container & Flex Items
A flex container is the parent element that holds flex items.
In Tailwind, you create it using:
flex
Example:
<div class="flex gap-4 bg-gray-100 p-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>
Explanation:
flex→ creates flex container- child elements → become flex items
Justify Content (Horizontal Alignment)
The justify-content property controls how items are aligned horizontally.
Justify Utilities
| Class | Behavior |
|---|---|
| justify-start | Align items left |
| justify-center | Align items center |
| justify-end | Align items right |
| justify-between | Space between items |
| justify-around | Equal space around items |
| justify-evenly | Equal spacing everywhere |
Example – justify-center
<div class="flex justify-center gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Result:
Items appear centered horizontally.
Example – justify-between
<div class="flex justify-between bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Result:
First item left, last item right.
Align Items (Vertical Alignment)
The align-items property controls vertical alignment of elements.
Align Utilities
| Class | Behavior |
|---|---|
| items-start | Align top |
| items-center | Align center |
| items-end | Align bottom |
| items-stretch | Stretch items |
| items-baseline | Align text baseline |
Example – items-center
<div class="flex items-center gap-4 bg-gray-100 p-4 h-40">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Result:
Items are vertically centered.
Flex Direction
The flex-direction property defines how flex items are arranged.
Flex Direction Utilities
| Class | Layout |
|---|---|
| flex-row | Horizontal |
| flex-row-reverse | Horizontal reverse |
| flex-col | Vertical |
| flex-col-reverse | Vertical reverse |
Example – flex-row
<div class="flex flex-row gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Items appear left to right.
Example – flex-col
<div class="flex flex-col gap-4 bg-gray-100 p-4 w-40">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Items appear top to bottom.
Gap Utilities
Gap utilities control spacing between elements.
Gap Classes
| Class | Description |
|---|---|
| gap-4 | Space between rows and columns |
| gap-x-4 | Horizontal spacing |
| gap-y-4 | Vertical spacing |
Example – gap
<div class="flex gap-6 bg-gray-100 p-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>
All items have equal spacing.
Example – Grid gap
<div class="grid grid-cols-2 gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
</div>
Spacing appears between rows and columns.
Real Layout Examples
Example 1 – Navbar Layout
<div class="flex justify-between items-center bg-blue-600 text-white p-4">
<div class="text-xl font-bold">
Logo
</div>
<div class="flex gap-6">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
Features:
flex→ containerjustify-between→ space between logo and menuitems-center→ vertical alignment
Example 2 – Sidebar Layout
<div class="flex min-h-screen">
<div class="w-64 bg-gray-800 text-white p-6">
Sidebar
</div>
<div class="flex-1 p-6 bg-gray-100">
Main Content
</div>
</div>
Used for dashboard layouts.
Example 3 – Card Layout
<div class="flex flex-wrap gap-6">
<div class="bg-white shadow p-6 w-64">
<h3 class="font-semibold">Card 1</h3>
<p class="text-gray-600">Example content</p>
</div>
<div class="bg-white shadow p-6 w-64">
<h3 class="font-semibold">Card 2</h3>
<p class="text-gray-600">Example content</p>
</div>
<div class="bg-white shadow p-6 w-64">
<h3 class="font-semibold">Card 3</h3>
<p class="text-gray-600">Example content</p>
</div>
</div>
Creates a modern card grid layout.
Why Use Flexbox with Tailwind?
Faster UI Development
You can build layouts quickly without writing CSS.
Clean Code
Utility classes keep layouts simple and readable.
Responsive Design
Tailwind breakpoints make layouts responsive.
Modern Web Design
Perfect for dashboards, landing pages, and apps.
FAQs
What is Flexbox in Tailwind?
Flexbox in Tailwind uses utility classes to control layout behavior such as alignment, direction, and spacing.
What does the flex class do?
The flex class converts an element into a flex container.
What is the difference between justify and items?
| Property | Axis |
|---|---|
| justify-content | Horizontal |
| align-items | Vertical |
Can I use Flexbox with Tailwind CDN?
Yes. Flexbox utilities work perfectly with the Tailwind CDN version.
When should I use Grid instead of Flexbox?
Use Grid for complex two-dimensional layouts and Flexbox for one-dimensional layouts.
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.