Tailwind Flexbox
Master Flexbox layouts with Tailwind utility classes
What you'll learn
Apply flexbox layout with Tailwind utility classes
Control alignment with justify-content and align-items utilities
Size flex items using flex-1, flex-auto, flex-grow, flex-shrink
Create responsive flex layouts with breakpoint prefixes
Use flex-wrap and gap for natural spacing
Reorder items visually with the order utility
Flexbox is a one-dimensional layout model. Tailwind provides utility classes for every Flexbox property.
Display Flex
Enable flexbox on any element:
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Direction
Control the flex direction:
<!-- Row (default) -->
<div class="flex flex-row">...</div>
<!-- Row reversed -->
<div class="flex flex-row-reverse">...</div>
<!-- Column -->
<div class="flex flex-col">...</div>
<!-- Column reversed -->
<div class="flex flex-col-reverse">...</div>
Justify Content
Align items along the main axis:
<div class="flex justify-start">...</div>
<div class="flex justify-center">...</div>
<div class="flex justify-end">...</div>
<div class="flex justify-between">...</div>
<div class="flex justify-around">...</div>
<div class="flex justify-evenly">...</div>
Align Items
Align items along the cross axis:
<div class="flex items-start">...</div>
<div class="flex items-center">...</div>
<div class="flex items-end">...</div>
<div class="flex items-stretch">...</div>
<div class="flex items-baseline">...</div>
Flex Wrap
Control wrapping behavior:
<div class="flex flex-wrap">...</div>
<div class="flex flex-nowrap">...</div>
<div class="flex flex-wrap-reverse">...</div>
Gap
Add spacing between flex items:
<div class="flex gap-2">...</div>
<div class="flex gap-4">...</div>
<div class="flex gap-8">...</div>
Flex Grow & Shrink
Control how items grow or shrink:
<div class="flex">
<div class="flex-1">Takes remaining space</div>
<div class="flex-none">Fixed width</div>
<div class="flex-1">Takes remaining space</div>
</div>
Common Patterns
Centered content (both axes):
<div class="flex h-64 items-center justify-center">
<div>Centered</div>
</div>
Sticky footer:
<div class="flex min-h-svh flex-col">
<header class="h-16">Header</header>
<main class="flex-1">Content</main>
<footer class="h-16">Footer</footer>
</div>
Card grid:
<div class="flex flex-wrap gap-4">
<div class="min-w-64 flex-1">Card 1</div>
<div class="min-w-64 flex-1">Card 2</div>
<div class="min-w-64 flex-1">Card 3</div>
</div>
Best Practices
- Use
gap-*instead of margins on children - Use
flex-1for equal distribution - Set
min-w-0to allow shrinking below content size - Use
items-centerfor vertical centering - Combine with
grow/shrinkfor responsive layouts
Next Steps
- CSS Grid — Two-dimensional layouts
- Spacing & Sizing — Padding, margin, width
Exercise: Create a responsive navbar with logo on the left and nav links on the right using Flexbox utilities.
Key Takeaways
Flexbox utilities in Tailwind are direct mappings to native CSS flex properties (flex-row, items-center, justify-between)
flex-1 gives an item equal share of available space; flex-shrink and flex-grow control individual item sizing
Responsive flex utilities (md:flex-row, lg:justify-center) change layout at different breakpoints
flex-wrap combined with w-1/2 or w-1/3 creates natural wrapping grid-like layouts
The gap utility provides consistent spacing between flex items without first/last child margin overrides