Flexbox in Tailwind CSS
From the Tailwind CSS cheat sheet · Flexbox & Grid · verified Jul 2026
Flexbox
Flexible box layout for rows and columns.
html
<!-- Basic flex row -->
<div class="flex gap-4">
<div>Item 1</div>
<div>Item 2</div>
</div>
<!-- Centered content -->
<div class="flex items-center justify-center h-screen">
<p>Perfectly centered</p>
</div>
<!-- Column layout -->
<div class="flex flex-col gap-2">
<div>Top</div>
<div>Bottom</div>
</div>💡 flex items-center justify-center is the classic centering pattern
⚡ Use flex-1 for items that should grow to fill available space equally
📌 shrink-0 prevents an item from shrinking — useful for fixed-size icons/buttons
🟢 gap-4 adds spacing between flex items without margin hacks
flexflexboxlayout
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.