Flex Direction in Tailwind CSS 4 – Complete Guide
Flexbox is one of the most powerful layout systems in modern CSS. When working with Flexbox, one of the most important properties is flex-direction.
The flex-direction property controls the direction in which flex items are arranged inside a container.
Tailwind CSS provides simple utility classes to control flex direction easily.
In this tutorial you will learn:
- What flex-direction is
- How to use Tailwind flex-direction utilities
- Horizontal and vertical layouts
- Responsive flex-direction examples
For this tutorial we will use the Tailwind CSS 4 browser CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a basic 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 mb-6">
Flex Direction in Tailwind CSS
</h1>
</body>
</html>
Now you can start using Tailwind flex utilities.
What is Flex Direction?
The flex-direction property defines how flex items are placed inside a container.
It determines whether items appear:
- Horizontally
- Vertically
- Reversed order
Example in CSS:
flex-direction: row;
In Tailwind:
flex-row
Tailwind Flex Direction Utilities
| Class | CSS Property |
|---|---|
| flex-row | flex-direction: row |
| flex-row-reverse | flex-direction: row-reverse |
| flex-col | flex-direction: column |
| flex-col-reverse | flex-direction: column-reverse |
Example 1 – flex-row (Default Layout)
flex-row arranges items horizontally from left to right.
<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>
Result:
Items appear in a horizontal row.
01 02 03
Example 2 – flex-row-reverse
flex-row-reverse arranges items horizontally but in reverse order.
<div class="flex flex-row-reverse 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 in reverse order.
03 02 01
Example 3 – flex-col
flex-col arranges items vertically from top to bottom.
<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>
Result:
Items appear in a vertical column.
01
02
03
Example 4 – flex-col-reverse
flex-col-reverse arranges items vertically but in reverse order.
<div class="flex flex-col-reverse 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>
Result:
Items appear bottom to top.
03
02
01
Practical Example – Card Layout
Here is a real-world UI example using flex-direction.
<div class="flex flex-col bg-white shadow-lg rounded-lg p-6 w-72 gap-4">
<img class="rounded-lg"
src="https://picsum.photos/300/200"
alt="image">
<h2 class="text-xl font-semibold">
Tailwind CSS Card
</h2>
<p class="text-gray-600">
This is a simple card layout using flex-direction column.
</p>
<button class="bg-blue-600 text-white py-2 rounded">
Read More
</button>
</div>
Here flex-col stacks elements vertically.
Responsive Flex Direction
Tailwind makes responsive layouts very easy.
Example:
<div class="flex flex-col md:flex-row gap-4">
<div class="bg-blue-500 text-white p-6">01</div>
<div class="bg-green-500 text-white p-6">02</div>
<div class="bg-red-500 text-white p-6">03</div>
</div>
Behavior:
| Screen Size | Layout |
|---|---|
| Mobile | Vertical (column) |
| Tablet/Desktop | Horizontal (row) |
This is commonly used in responsive UI layouts.
Example – Responsive Card Layout
<div class="flex flex-col md:flex-row gap-6 bg-gray-100 p-6">
<img src="https://picsum.photos/200"
class="rounded-lg">
<div>
<h2 class="text-xl font-semibold">
Responsive Flex Layout
</h2>
<p class="text-gray-600 mt-2">
On mobile the layout stacks vertically, while on larger screens it becomes horizontal.
</p>
</div>
</div>
This is a common blog or product card layout.
Why Use Flex Direction in Tailwind?
Easy Layout Control
You can quickly change layout direction with a single class.
Responsive Design
Tailwind breakpoints make responsive layouts simple.
Clean HTML Structure
No custom CSS needed.
Faster Development
Tailwind utilities speed up UI development.
FAQs
1. What does flex-direction do?
The flex-direction property controls the direction in which flex items are arranged inside a container.
2. What is the default flex-direction?
The default direction is:
flex-row
Items appear horizontally.
3. What is the difference between flex-row and flex-col?
| Class | Layout |
|---|---|
| flex-row | Horizontal layout |
| flex-col | Vertical layout |
4. When should I use flex-row-reverse?
Use flex-row-reverse when you want items displayed in reverse horizontal order.
5. How do I make a responsive flex direction?
Use Tailwind breakpoints.
Example:
flex-col md:flex-row
Mobile → column
Desktop → row
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.