LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1218 min read

Flexbox Utilities

Learn how Tailwind CSS exposes the full CSS flexbox model through utility classes, including direction, justification, alignment, gap, and wrapping.

Introduction

Flexbox is one of the most common layout tools on the modern web, and Tailwind CSS gives you direct access to every part of the CSS flexbox specification through small, composable utility classes. Instead of writing custom CSS with display: flex, justify-content, and align-items, you apply classes like flex, justify-between, and items-center straight in your markup.

What You Will Learn
  • How to turn any element into a flex container.
  • How to control the direction items flow in.
  • How to justify content along the main axis.
  • How to align items along the cross axis.
  • How to space items with gap utilities.
  • How to control wrapping behavior.

Enabling Flexbox

To turn an element into a flex container, add the flex class. This is equivalent to display: flex; in plain CSS. If you need an inline flex container, use inline-flex instead, which is equivalent to display: inline-flex;.

Basic flex container
<div class="flex bg-slate-100 p-4 rounded-lg">
  <div class="bg-blue-500 text-white p-4">1</div>
  <div class="bg-blue-600 text-white p-4">2</div>
  <div class="bg-blue-700 text-white p-4">3</div>
</div>
Result

Click Run to see what this code prints.

Flex Direction

The direction items flow in is controlled with the flex-direction utilities. flex-row is the default (left to right), flex-row-reverse reverses that order, flex-col stacks items vertically, and flex-col-reverse stacks them vertically in reverse.

Column direction
<div class="flex flex-col gap-2 bg-slate-100 p-4 rounded-lg">
  <div class="bg-emerald-500 text-white p-3">First</div>
  <div class="bg-emerald-600 text-white p-3">Second</div>
  <div class="bg-emerald-700 text-white p-3">Third</div>
</div>
Result

Click Run to see what this code prints.

ClassCSS Property
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-colflex-direction: column;
flex-col-reverseflex-direction: column-reverse;

Justifying Content

Justify utilities control how items are spaced along the main axis. justify-start packs items at the beginning, justify-center centers them, justify-end packs them at the end, justify-between spreads them with equal space between (no space at the edges), justify-around gives equal space around each item, and justify-evenly gives fully equal space everywhere, including the edges.

justify-between navbar
<div class="flex justify-between bg-slate-100 p-4 rounded-lg">
  <div class="bg-purple-500 text-white p-3">Logo</div>
  <div class="bg-purple-600 text-white p-3">Nav Links</div>
  <div class="bg-purple-700 text-white p-3">Button</div>
</div>
Result

Click Run to see what this code prints.

Aligning Items

While justify-* controls the main axis, items-* controls alignment along the cross axis. items-start aligns items to the top (in a row), items-center vertically centers them, items-end aligns them to the bottom, items-baseline aligns text baselines, and items-stretch (the default) stretches items to fill the container height.

items-center with mismatched heights
<div class="flex items-center h-24 gap-4 bg-slate-100 p-4 rounded-lg">
  <div class="bg-orange-500 text-white p-2">Small</div>
  <div class="bg-orange-600 text-white p-6">Tall Box</div>
  <div class="bg-orange-700 text-white p-3">Medium</div>
</div>
Result

Click Run to see what this code prints.

Gap Between Items

Before flexbox gap support, developers used margin tricks to space items apart, which often required extra negative-margin wrappers. Tailwind gap utilities apply the modern CSS gap property directly. gap-4 sets spacing in both directions, while gap-x-4 and gap-y-4 target only the horizontal or vertical gap respectively.

Using gap-6 instead of margins
<div class="flex gap-6 bg-slate-100 p-4 rounded-lg">
  <div class="bg-rose-500 text-white p-4">A</div>
  <div class="bg-rose-600 text-white p-4">B</div>
  <div class="bg-rose-700 text-white p-4">C</div>
</div>
Result

Click Run to see what this code prints.

Wrapping Flex Items

By default flex items try to fit on a single line, shrinking if necessary. Adding flex-wrap allows items to wrap onto multiple lines when they run out of room, which is especially useful for tag lists or responsive card rows. flex-nowrap is the explicit default, and flex-wrap-reverse wraps in the opposite direction.

Wrapping tag list
<div class="flex flex-wrap gap-2 w-64 bg-slate-100 p-4 rounded-lg">
  <span class="bg-sky-500 text-white px-3 py-1 rounded-full">Design</span>
  <span class="bg-sky-500 text-white px-3 py-1 rounded-full">Frontend</span>
  <span class="bg-sky-500 text-white px-3 py-1 rounded-full">Tailwind</span>
  <span class="bg-sky-500 text-white px-3 py-1 rounded-full">CSS</span>
  <span class="bg-sky-500 text-white px-3 py-1 rounded-full">Layout</span>
</div>
Result

Click Run to see what this code prints.

Common Mistakes

Avoid These Mistakes
  • Forgetting the flex class itself — justify-* and items-* do nothing without a flex or inline-flex parent.
  • Confusing justify-* (main axis) with items-* (cross axis), especially after switching to flex-col, where the axes swap.
  • Using margin-based spacing hacks instead of the simpler gap-* utilities.
  • Applying flex-wrap but forgetting that wrapped rows need their own gap-y-* spacing to look clean.
  • Expecting items-stretch by default to make items the same width in a row — stretch affects the cross axis, not the main axis.

Best Practices

  • Reach for flex before grid when you are laying out a single row or column of items.
  • Use gap-* instead of manual margins whenever possible — it keeps spacing symmetric.
  • Combine flex-wrap with gap-* for responsive tag lists and card rows that need to reflow.
  • Remember that in flex-col, justify-* controls vertical spacing and items-* controls horizontal alignment.
  • Pair flex utilities with responsive prefixes (covered in the next lessons) to change direction on different screen sizes.

Frequently Asked Questions

flex sets display: flex, so the container behaves like a block-level box. inline-flex sets display: inline-flex, so the container flows inline with surrounding text while its children still use flexbox.

Yes, this lesson covers layout direction, alignment, and spacing. Sizing individual flex children with flex-1, grow, and shrink is a related but separate set of utilities you will often use alongside these.

gap only applies to elements that are already flex or grid containers. Make sure the flex class (or grid) is present on the same element as gap-*.

Key Takeaways

  • flex and inline-flex turn an element into a flex container.
  • flex-row, flex-row-reverse, flex-col, and flex-col-reverse set the main axis direction.
  • justify-* utilities control spacing along the main axis.
  • items-* utilities control alignment along the cross axis.
  • gap-*, gap-x-*, and gap-y-* provide clean, consistent spacing without margin hacks.
  • flex-wrap allows items to flow onto multiple lines when space runs out.

Summary

Flexbox utilities are some of the most frequently used classes in any Tailwind project. With flex, a direction utility, a justify-* value, an items-* value, and gap-*, you can build navbars, button groups, form rows, and card layouts without writing a single line of custom CSS. Next, you will learn Tailwind's grid utilities, which give you similar power for two-dimensional layouts.

Next Lesson →

Grid Utilities