Flexbox is one of the most powerful tools in modern CSS for creating layouts. With Tailwind's flexbox utilities, you can build complex, responsive layouts without writing a single line of custom CSS. In this lesson, you'll master flex containers, alignment, distribution, direction, wrapping, and gaps to create professional layouts with ease.
Creating a Flex Container
Everything starts with the flex utility, which turns an element into a flex container:
HTML
<!-- Without flex - items stack vertically (default block behavior) -->
<div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- With flex - items sit side by side -->
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Once an element has flex, its direct children become flex items that you can align, space, and distribute.
Flex vs Inline-Flex
flex- Block-level flex container (full width)inline-flex- Inline-level flex container (only as wide as needed)
Understanding Flex Axes
Flexbox works on two axes:
- Main Axis: The primary axis along which flex items are laid out
- Cross Axis: The axis perpendicular to the main axis
By default (with flex-row):
- Main axis = horizontal (left to right)
- Cross axis = vertical (top to bottom)
With flex-col:
- Main axis = vertical (top to bottom)
- Cross axis = horizontal (left to right)
💡 Remember This!
justify-content controls the main axis
align-items controls the cross axis
Flex Direction
Control the direction flex items are placed in the container:
Flex Row (Default)
Items flow horizontally from left to right:
HTML
<div class="flex flex-row gap-4">
<div class="bg-blue-500 text-white p-4">1</div>
<div class="bg-blue-500 text-white p-4">2</div>
<div class="bg-blue-500 text-white p-4">3</div>
</div>
<!-- Result: 1 2 3 (horizontal) -->Flex Row Reverse
Items flow horizontally from right to left:
HTML
<div class="flex flex-row-reverse gap-4">
<div class="bg-green-500 text-white p-4">1</div>
<div class="bg-green-500 text-white p-4">2</div>
<div class="bg-green-500 text-white p-4">3</div>
</div>
<!-- Result: 3 2 1 (horizontal, reversed) -->Flex Column
Items stack vertically from top to bottom:
HTML
<div class="flex flex-col gap-4">
<div class="bg-purple-500 text-white p-4">1</div>
<div class="bg-purple-500 text-white p-4">2</div>
<div class="bg-purple-500 text-white p-4">3</div>
</div>
<!-- Result:
1
2
3
(vertical) -->Flex Column Reverse
Items stack vertically from bottom to top:
HTML
<div class="flex flex-col-reverse gap-4">
<div class="bg-orange-500 text-white p-4">1</div>
<div class="bg-orange-500 text-white p-4">2</div>
<div class="bg-orange-500 text-white p-4">3</div>
</div>
<!-- Result:
3
2
1
(vertical, reversed) -->Responsive Direction
Change direction based on screen size:
HTML
<!-- Stack on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-4">
<div class="bg-blue-500 text-white p-4">Item 1</div>
<div class="bg-blue-500 text-white p-4">Item 2</div>
<div class="bg-blue-500 text-white p-4">Item 3</div>
</div>
<!-- Mobile: vertical stack
Desktop: horizontal row -->Justify Content (Main Axis)
justify-content controls how flex items are distributed along the main axis:
Justify Start (Default)
Items packed at the start:
HTML
<div class="flex justify-start gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">1</div>
<div class="bg-blue-500 text-white p-4">2</div>
<div class="bg-blue-500 text-white p-4">3</div>
</div>
<!-- Result: [1 2 3 ] -->Justify Center
Items centered in the container:
HTML
<div class="flex justify-center gap-4 bg-gray-100 p-4">
<div class="bg-green-500 text-white p-4">1</div>
<div class="bg-green-500 text-white p-4">2</div>
<div class="bg-green-500 text-white p-4">3</div>
</div>
<!-- Result: [ 1 2 3 ] -->Justify End
Items packed at the end:
HTML
<div class="flex justify-end gap-4 bg-gray-100 p-4">
<div class="bg-purple-500 text-white p-4">1</div>
<div class="bg-purple-500 text-white p-4">2</div>
<div class="bg-purple-500 text-white p-4">3</div>
</div>
<!-- Result: [ 1 2 3] -->Justify Between
Space distributed between items (very common!):
HTML
<div class="flex justify-between gap-4 bg-gray-100 p-4">
<div class="bg-orange-500 text-white p-4">1</div>
<div class="bg-orange-500 text-white p-4">2</div>
<div class="bg-orange-500 text-white p-4">3</div>
</div>
<!-- Result: [1 2 3] -->Justify Around
Equal space around each item:
HTML
<div class="flex justify-around gap-4 bg-gray-100 p-4">
<div class="bg-pink-500 text-white p-4">1</div>
<div class="bg-pink-500 text-white p-4">2</div>
<div class="bg-pink-500 text-white p-4">3</div>
</div>
<!-- Result: [ 1 2 3 ] -->Justify Evenly
Equal space between and around items:
HTML
<div class="flex justify-evenly gap-4 bg-gray-100 p-4">
<div class="bg-teal-500 text-white p-4">1</div>
<div class="bg-teal-500 text-white p-4">2</div>
<div class="bg-teal-500 text-white p-4">3</div>
</div>
<!-- Result: [ 1 2 3 ] -->Most Common Patterns
justify-between- For navigation bars (logo left, links right)justify-center- For hero sections and centered contentjustify-end- For right-aligned buttons or actions
Align Items (Cross Axis)
align-items controls how flex items are aligned along the cross axis:
Items Start
Items aligned at the start of the cross axis:
HTML
<div class="flex items-start h-32 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">Short</div>
<div class="bg-blue-500 text-white p-8">Tall</div>
<div class="bg-blue-500 text-white p-4">Short</div>
</div>Items Center
Items centered on the cross axis (very common!):
HTML
<div class="flex items-center h-32 bg-gray-100 p-4">
<div class="bg-green-500 text-white p-4">Short</div>
<div class="bg-green-500 text-white p-8">Tall</div>
<div class="bg-green-500 text-white p-4">Short</div>
</div>Items End
Items aligned at the end of the cross axis:
HTML
<div class="flex items-end h-32 bg-gray-100 p-4">
<div class="bg-purple-500 text-white p-4">Short</div>
<div class="bg-purple-500 text-white p-8">Tall</div>
<div class="bg-purple-500 text-white p-4">Short</div>
</div>Items Baseline
Items aligned by their text baseline:
HTML
<div class="flex items-baseline bg-gray-100 p-4">
<div class="bg-orange-500 text-white p-2 text-sm">Small</div>
<div class="bg-orange-500 text-white p-4 text-2xl">Large</div>
<div class="bg-orange-500 text-white p-3 text-lg">Medium</div>
</div>Items Stretch (Default)
Items stretch to fill the container height:
HTML
<div class="flex items-stretch h-32 bg-gray-100 p-4">
<div class="bg-pink-500 text-white p-4">I stretch!</div>
<div class="bg-pink-500 text-white p-4">Me too!</div>
<div class="bg-pink-500 text-white p-4">Same here!</div>
</div>🎯 Perfect Centering
Combine justify-center and items-center to center content both horizontally and vertically:
HTML
<div class="flex justify-center items-center min-h-screen">
<div>Perfectly centered!</div>
</div>Gap Utilities
Gap utilities add space between flex items without affecting the outer edges:
HTML
<!-- Equal gap on all sides -->
<div class="flex gap-4">
<div class="bg-blue-500 p-4">Item 1</div>
<div class="bg-blue-500 p-4">Item 2</div>
<div class="bg-blue-500 p-4">Item 3</div>
</div>
<!-- Different horizontal and vertical gaps -->
<div class="flex flex-wrap gap-x-6 gap-y-3">
<div class="bg-green-500 p-4">Item</div>
<div class="bg-green-500 p-4">Item</div>
<div class="bg-green-500 p-4">Item</div>
</div>
<!-- No gap -->
<div class="flex gap-0">
<div class="bg-purple-500 p-4">No</div>
<div class="bg-purple-500 p-4">Space</div>
<div class="bg-purple-500 p-4">Between</div>
</div>Available gap sizes:
gap-0togap-96- Various sizesgap-x-*- Horizontal gap onlygap-y-*- Vertical gap only
Gap vs Margin: Gap only adds space between items, not at the edges of the container. This makes it perfect for flex and grid layouts!
Flex Wrap
Control whether flex items wrap to multiple lines:
No Wrap (Default)
All items stay on one line (may overflow):
HTML
<div class="flex flex-nowrap gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4 w-48">Wide item</div>
<div class="bg-blue-500 text-white p-4 w-48">Wide item</div>
<div class="bg-blue-500 text-white p-4 w-48">Wide item</div>
<div class="bg-blue-500 text-white p-4 w-48">Wide item</div>
</div>Wrap
Items wrap to new lines as needed:
HTML
<div class="flex flex-wrap gap-4 bg-gray-100 p-4">
<div class="bg-green-500 text-white p-4 w-48">Item 1</div>
<div class="bg-green-500 text-white p-4 w-48">Item 2</div>
<div class="bg-green-500 text-white p-4 w-48">Item 3</div>
<div class="bg-green-500 text-white p-4 w-48">Item 4</div>
<div class="bg-green-500 text-white p-4 w-48">Item 5</div>
</div>Wrap Reverse
Items wrap but new lines appear above:
HTML
<div class="flex flex-wrap-reverse gap-4 bg-gray-100 p-4">
<div class="bg-purple-500 text-white p-4 w-48">Item 1</div>
<div class="bg-purple-500 text-white p-4 w-48">Item 2</div>
<div class="bg-purple-500 text-white p-4 w-48">Item 3</div>
<div class="bg-purple-500 text-white p-4 w-48">Item 4</div>
</div>Responsive Wrapping
HTML
<!-- Don't wrap on large screens, wrap on small screens -->
<div class="flex flex-wrap lg:flex-nowrap gap-4">
<div class="bg-blue-500 text-white p-4 flex-1">Item 1</div>
<div class="bg-blue-500 text-white p-4 flex-1">Item 2</div>
<div class="bg-blue-500 text-white p-4 flex-1">Item 3</div>
</div>Flex Grow and Shrink
Control how flex items grow and shrink to fill available space:
Flex 1 (Grow and Shrink)
Item grows to fill available space:
HTML
<div class="flex gap-4">
<div class="flex-1 bg-blue-500 text-white p-4">
I grow to fill space
</div>
<div class="bg-green-500 text-white p-4">
Fixed width
</div>
</div>Flex Auto
Item grows and shrinks based on content:
HTML
<div class="flex gap-4">
<div class="flex-auto bg-purple-500 text-white p-4">
Flexible
</div>
<div class="flex-auto bg-purple-500 text-white p-4">
Also flexible
</div>
</div>Flex Initial
Item shrinks but doesn't grow:
HTML
<div class="flex gap-4">
<div class="flex-initial bg-orange-500 text-white p-4">
Won't grow
</div>
<div class="flex-1 bg-blue-500 text-white p-4">
Grows to fill
</div>
</div>Flex None
Item doesn't grow or shrink:
HTML
<div class="flex gap-4">
<div class="flex-none w-32 bg-pink-500 text-white p-4">
Fixed 128px
</div>
<div class="flex-1 bg-green-500 text-white p-4">
Takes rest
</div>
</div>📏 Common Pattern
Use flex-1 on items you want to grow and fill space, and flex-none with explicit widths for fixed-size items.
Interactive Flexbox Visualizer
Experiment with different flexbox utilities to see how they work together:
Flexbox Playground
Try different combinations to master flexbox
Preview
1
2
3
4
5
Applied Classes
flex flex-row justify-start items-start flex-nowrap gap-4💡 Justify Content
Controls alignment along the main axis (horizontal in row, vertical in column)
💡 Align Items
Controls alignment along the cross axis (vertical in row, horizontal in column)
Practical Flexbox Examples
Example 1: Navigation Bar
HTML
<nav class="flex items-center justify-between bg-white shadow-md px-6 py-4">
<!-- Logo on left -->
<div class="flex items-center gap-2">
<img src="logo.svg" alt="Logo" class="h-8">
<span class="text-xl font-bold">Brand</span>
</div>
<!-- Links in center -->
<div class="hidden md:flex gap-6">
<a href="#" class="hover:text-blue-600">Home</a>
<a href="#" class="hover:text-blue-600">About</a>
<a href="#" class="hover:text-blue-600">Services</a>
<a href="#" class="hover:text-blue-600">Contact</a>
</div>
<!-- Button on right -->
<button class="bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600">
Sign In
</button>
</nav>Example 2: Card Grid (Responsive)
HTML
<div class="flex flex-wrap gap-6">
<!-- Each card takes full width on mobile, half on tablet, third on desktop -->
<div class="flex-1 min-w-[300px] bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold mb-2">Card 1</h3>
<p class="text-gray-600">Content goes here...</p>
</div>
<div class="flex-1 min-w-[300px] bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold mb-2">Card 2</h3>
<p class="text-gray-600">Content goes here...</p>
</div>
<div class="flex-1 min-w-[300px] bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold mb-2">Card 3</h3>
<p class="text-gray-600">Content goes here...</p>
</div>
</div>Example 3: Centered Hero Section
HTML
<section class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4">
<h1 class="text-5xl md:text-7xl font-bold text-center mb-6">
Welcome to Our Site
</h1>
<p class="text-xl md:text-2xl text-center mb-8 max-w-2xl">
Build amazing things with Tailwind CSS
</p>
<div class="flex gap-4">
<button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100">
Get Started
</button>
<button class="bg-transparent border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-600">
Learn More
</button>
</div>
</section>Example 4: Feature List
HTML
<div class="flex flex-col md:flex-row gap-8">
<!-- Each feature -->
<div class="flex flex-1 gap-4">
<!-- Icon -->
<div class="flex-none w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-blue-600">...</svg>
</div>
<!-- Content -->
<div class="flex-1">
<h3 class="font-bold text-lg mb-2">Fast</h3>
<p class="text-gray-600">Lightning-fast performance</p>
</div>
</div>
<div class="flex flex-1 gap-4">
<div class="flex-none w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-green-600">...</svg>
</div>
<div class="flex-1">
<h3 class="font-bold text-lg mb-2">Secure</h3>
<p class="text-gray-600">Bank-level security</p>
</div>
</div>
<div class="flex flex-1 gap-4">
<div class="flex-none w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
<svg class="w-6 h-6 text-purple-600">...</svg>
</div>
<div class="flex-1">
<h3 class="font-bold text-lg mb-2">Scalable</h3>
<p class="text-gray-600">Grows with your business</p>
</div>
</div>
</div>Example 5: Split Panel Layout
HTML
<div class="flex flex-col lg:flex-row min-h-screen">
<!-- Left panel - Fixed width on desktop -->
<aside class="lg:w-80 bg-gray-800 text-white p-6">
<h2 class="text-2xl font-bold mb-6">Sidebar</h2>
<nav class="flex flex-col gap-2">
<a href="#" class="p-3 rounded hover:bg-gray-700">Dashboard</a>
<a href="#" class="p-3 rounded hover:bg-gray-700">Projects</a>
<a href="#" class="p-3 rounded hover:bg-gray-700">Settings</a>
</nav>
</aside>
<!-- Right panel - Grows to fill space -->
<main class="flex-1 p-8 bg-gray-50">
<h1 class="text-3xl font-bold mb-6">Main Content</h1>
<div class="bg-white rounded-lg shadow p-6">
Your content here...
</div>
</main>
</div>Common Flexbox Patterns
Memorize These Common Combinations:
flex items-center justify-between- Navigation barsflex items-center justify-center- Perfect centeringflex flex-col gap-4- Vertical stack with spacingflex flex-wrap gap-6- Responsive grid alternativeflex-1- Item that grows to fill available spaceflex-none w-*- Item with fixed width
Flexbox vs Grid: When to Use What?
Both are powerful, but they excel at different things:
Use Flexbox When:
- You have a one-dimensional layout (row OR column)
- Content size should determine layout (content-first)
- You want items to wrap naturally
- Building navigation bars, toolbars, or button groups
Use Grid When:
- You have a two-dimensional layout (rows AND columns)
- Layout should determine content size (layout-first)
- You need precise control over both dimensions
- Building page layouts, photo galleries, or dashboards
Don't worry—we'll cover Grid utilities in the next lesson!
Practice Playground
Try building your own flex layouts:
Build Your Flex Layout
Experiment with flex utilities to create different layouts
User Name
Online
Key Takeaways
flexcreates a flex container for its childrenjustify-contentcontrols main axis alignmentitems-*(align-items) controls cross axis alignmentflex-rowis horizontal,flex-colis verticalgap-*adds space between items without affecting edgesflex-wrapallows items to wrap to multiple linesflex-1makes items grow to fill space- Combine utilities for powerful responsive layouts
- Flexbox excels at one-dimensional layouts
What's Next?
You've mastered Flexbox utilities! Now you're ready to learn about the other powerful modern layout system: CSS Grid.
In the next lesson, we'll explore Grid Utilities— learning how to create two-dimensional layouts with precise control over rows, columns, and item placement.
🎯 Practice Challenge!
Build a responsive navigation bar with a logo on the left, links in the center, and a button on the right using only flexbox utilities. Make it stack vertically on mobile!
Test Your Understanding
Question 1 of 3Score: 0/0