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

More Tailwind CSS tasks

Grid

Back to the full Tailwind CSS cheat sheet