Flex

1 min read | Tailwind CSS Tutorial

⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Flexbox is one of the most powerful layout tools in CSS, and Tailwind makes it incredibly easy to use. With just a few utility classes, you can create complex, responsive layouts that used to require floats and clearfix hacks.

Enabling flex

Apply flex to a container to make it a flex container. Its direct children become flex items.


<div class="flex">
  <div class="bg-blue-100 p-4">Item 1</div>
  <div class="bg-blue-200 p-4">Item 2</div>
  <div class="bg-blue-300 p-4">Item 3</div>
</div>

Alignment

Tailwind provides utilities for aligning items along both axes.


<!-- Horizontal alignment (main axis) -->
<div class="flex justify-start">Items at start</div>
<div class="flex justify-center">Items centered</div>
<div class="flex justify-end">Items at end</div>
<div class="flex justify-between">Items spread evenly</div>
<div class="flex justify-around">Items with space around</div>

<!-- Vertical alignment (cross axis) -->
<div class="flex items-start">Items at top</div>
<div class="flex items-center">Items vertically centered</div>
<div class="flex items-end">Items at bottom</div>

The classic centering trick

Centering content used to be a rite of passage for CSS developers. With Tailwind, it's one line.


<div class="flex items-center justify-center h-screen">
  <p class="text-2xl font-bold">Perfectly centered</p>
</div>

Flex inline

Use inline-flex when you want flex behavior without the container taking full width.


<span class="inline-flex items-center gap-2 bg-gray-100 px-3 py-1 rounded">
  <span class="w-2 h-2 bg-green-500 rounded-full"></span>
  Online
</span>