Tailwind CSS Flexbox Guide Complete Flex Utilities Reference
Tailwind CSS provides intuitive flexbox utility classes that let you build flexible, responsive layouts without writing custom CSS. This guide covers every flexbox utility in Tailwind CSS with practical code examples and visual demonstrations for common layout patterns.
💡 Quick Answer
Using Tailwind CSS Flexbox: Apply flex to create a flex container, then use flex-row/flex-col for direction, justify-center/items-center for alignment, and gap-4 for spacing. Add responsive prefixes like md:flex-row to change layout at different breakpoints.
Flex Container Basics
Enable flexbox by adding the flex class to any container element. Combine with direction, alignment, and spacing utilities to build any layout.
html
<!-- Basic horizontal flex layout -->
<div class="flex items-center gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- Centered content -->
<div class="flex items-center justify-center min-h-screen">
<h1>Perfectly Centered</h1>
</div>
<!-- Space between items -->
<nav class="flex items-center justify-between px-6 py-4">
<div>Logo</div>
<div>Navigation</div>
</nav>All Flexbox Utilities Reference
| Category | Class | CSS | Effect |
|---|---|---|---|
| Display | flex | display: flex | Creates flex container |
inline-flex | display: inline-flex | Inline flex container | |
| Direction | flex-row | flex-direction: row | Horizontal (default) |
flex-col | flex-direction: column | Vertical | |
flex-row-reverse | flex-direction: row-reverse | Reverse horizontal | |
flex-col-reverse | flex-direction: column-reverse | Reverse vertical | |
| Justify | justify-start | justify-content: flex-start | Pack to start |
justify-center | justify-content: center | Center items | |
justify-end | justify-content: flex-end | Pack to end | |
justify-between | justify-content: space-between | Space between | |
| Align | items-start | align-items: flex-start | Align to top |
items-center | align-items: center | Center vertically | |
items-end | align-items: flex-end | Align to bottom | |
| Sizing | flex-1 | flex: 1 1 0% | Grow and shrink |
flex-grow | flex-grow: 1 | Allow growing | |
flex-none | flex: none | No grow/shrink | |
| Wrap | flex-wrap | flex-wrap: wrap | Allow wrapping |
flex-nowrap | flex-wrap: nowrap | No wrapping | |
| Gap | gap-4 | gap: 1rem | 16px all gaps |
gap-x-4 | column-gap: 1rem | 16px horizontal | |
gap-y-2 | row-gap: 0.5rem | 8px vertical |
Common Flexbox Layout Patterns
Responsive Sidebar Layout
html
<div class="flex flex-col md:flex-row min-h-screen">
<aside class="w-full md:w-64 bg-gray-900 p-6">
Sidebar
</aside>
<main class="flex-1 p-6">
Main Content
</main>
</div>Card Row with Equal Heights
html
<div class="flex flex-wrap gap-4">
<div class="flex-1 min-w-[250px] p-6 bg-gray-800 rounded-lg">
Card with short content
</div>
<div class="flex-1 min-w-[250px] p-6 bg-gray-800 rounded-lg">
Card with much longer content that wraps to multiple lines
</div>
<div class="flex-1 min-w-[250px] p-6 bg-gray-800 rounded-lg">
Card with medium content
</div>
</div>Footer Pushed to Bottom
html
<div class="flex flex-col min-h-screen">
<header class="p-6 bg-gray-900">Header</header>
<main class="flex-1 p-6">Content</main>
<footer class="p-6 bg-gray-900">Footer (always at bottom)</footer>
</div>Frequently Asked Questions
To center an element horizontally and vertically with Tailwind CSS, use flex items-center justify-center on the parent container. For full-page centering, add min-h-screen. Example: <div class="flex items-center justify-center min-h-screen">. This applies display: flex, align-items: center, and justify-content: center.
flex-row sets flex-direction: row, arranging children horizontally (left to right). flex-col sets flex-direction: column, arranging children vertically (top to bottom). Use responsive prefixes to switch: flex-col md:flex-row creates a mobile-vertical, desktop-horizontal layout.
Use the gap utility for consistent spacing between flex items. gap-4 adds 1rem (16px) between all items. Use gap-x-4 for horizontal-only spacing and gap-y-2 for vertical-only spacing. The gap utility is preferred over space-x or space-y because it handles wrapping correctly.
Use flex-1 to make a flex item grow and shrink to fill available space equally. Use flex-grow for grow-only behavior without shrinking. Use flex-none to prevent an item from growing or shrinking. Combine these utilities to create flexible layouts where specific items expand while others stay fixed.
Use responsive prefixes to change flex behavior at different screen sizes. The most common pattern is flex flex-col md:flex-row this stacks items vertically on mobile and arranges them horizontally on medium screens and above. Add gap-4 for spacing and items-center for vertical alignment.
Also check out the Tailwind CSS Grid Guide for grid-based layouts, or browse the complete cheat sheet for all utility classes.