Tailwind CSS Guide
Tailwind CSS Flexbox: The Complete Guide
The one-dimensional layout system you'll use on every project.
Last updated: October 2026 · Tested on Tailwind v4.0
Quick answer: Add flex to a container to enable Flexbox. Use flex-row or flex-col for direction. Control alignment with justify-* (main axis) and items-* (cross axis). Add gap-N for spacing. The classic centering recipe: flex items-center justify-center.
Basic Flex Setup
The three essential classes:
<div class="flex gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>flex— enables Flexbox, default direction is row.gap-4— adds 1rem spacing between items.
Direction: Row vs Column
<!-- Horizontal (default) -->
<div class="flex flex-row gap-4">...</div>
<!-- Vertical -->
<div class="flex flex-col gap-4">...</div>
<!-- Responsive: column on mobile, row on desktop -->
<div class="flex flex-col md:flex-row gap-4">...</div>The flex-col md:flex-row pattern is the most common responsive layout in Tailwind.
Alignment: justify and items
The two most important properties in Flexbox:
| Class | Effect |
|---|---|
justify-start |
Items packed to the start (default) |
justify-center |
Items centered horizontally |
justify-end |
Items packed to the end |
justify-between |
Items spread out with first at start, last at end |
items-start |
Items aligned to top |
items-center |
Items vertically centered |
items-end |
Items aligned to bottom |
💡 The golden rule: justify works on the main axis. items works on the cross axis. For a flex-row, justify is horizontal, items is vertical.
The Classic Centering Recipe
Centering anything vertically and horizontally used to be hard. Now it's two classes:
<div class="flex items-center justify-center h-screen">
<div>Perfectly centered</div>
</div>This pattern works for modals, hero sections, loading states, and empty states.
Real-World: Responsive Navbar
The most common Flexbox pattern in real apps:
<nav class="flex items-center justify-between px-6 py-4 bg-slate-900">
<a href="/" class="text-xl font-bold">Logo</a>
<ul class="flex gap-6">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>justify-between pushes the logo to the left and the nav links to the right automatically.
Real-World: Card with Footer Pushed Down
<div class="flex flex-col h-64 bg-slate-800 rounded-xl p-4">
<div>
<h3>Card Title</h3>
<p>Card description...</p>
</div>
<button class="mt-auto">Action</button>
</div>mt-auto pushes the button to the bottom of the flex column. This is the cleanest way to make card footers align.
Flex Grow and Shrink
<div class="flex gap-4">
<div class="w-32">Fixed sidebar</div>
<div class="flex-1">Grows to fill space</div>
<div class="w-32">Fixed sidebar</div>
</div>flex-1 makes an item grow and shrink to fill available space. Use it for the main content area between fixed-width sidebars.
🎯 Flexbox vs Grid: When to Use Which
| Use Case | Flexbox | Grid |
|---|---|---|
| Navbars, toolbars, buttons | ✅ Best | Overkill |
| Centering one element | ✅ Best | Possible |
| Rows of items that wrap | ✅ Best | Possible |
| Card grids, dashboards | Harder | ✅ Best |
🛡️ Best Practices
- Use
gap-Ninstead ofspace-x-N— gap is cleaner and works both directions. - For responsive layouts, always start mobile-first:
flex-col md:flex-row. - Use
flex-1for the main content area between fixed-width siblings. - Use
mt-autoto push footers to the bottom of a flex column. - Use
flex-wrapwhen items might overflow on smaller screens. - Combine Flexbox (component layout) with Grid (page layout) for the best results.
Common mistake: Forgetting that justify-* controls the main axis, not always horizontal. In a flex-col container, justify-center centers vertically.
❓ Frequently Asked Questions
How do I center a div with Tailwind Flexbox?
Use flex items-center justify-center on the parent container. This centers the child both horizontally and vertically.
What is the difference between justify and items in Tailwind?
justify-* controls alignment along the main axis (row or column). items-* controls alignment along the cross axis. For a flex-row, justify is horizontal and items is vertical.
When should I use Flexbox instead of Grid?
Use Flexbox for 1D layouts: navbars, toolbars, rows of items, or centering. Use Grid for 2D layouts with both rows and columns, like dashboards or card grids.
How do I make a navbar with Tailwind Flexbox?
Use flex items-center justify-between on the navbar container. Put the logo on the left and the nav links on the right — they will space out automatically.
What does flex-1 do in Tailwind?
flex-1 sets flex: 1 1 0%, making the item grow to fill available space and shrink if needed. It's commonly used for the main content area in a flex layout.