Tailwind Flexbox Utilities

Apply flex to activate Flexbox on a container, then control direction, alignment, and spacing with additional classes.

Direction and gap

<div class="flex flex-row gap-4">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<div class="flex flex-col gap-2">
  <div>One</div>
  <div>Two</div>
</div>

Justify and align

<nav class="flex justify-between items-center px-6 py-4">
  <span>Logo</span>
  <ul class="flex gap-6">
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>

Flex children

<div class="flex gap-4">
  <aside class="w-64 flex-shrink-0">Sidebar</aside>
  <main class="flex-1">Main content grows to fill</main>
</div>

flex-1 sets flex: 1 1 0% — the element grows and shrinks to fill available space. flex-shrink-0 prevents an element from shrinking. This is the standard pattern for sidebar layouts: fixed sidebar plus fluid main content.