Flexbox Utilities

Building Layouts with Flex

Apply flex to a container to enable flexbox. Then control direction, wrapping, and alignment with utility classes on the container, and control individual items with utilities on the children.

Container Utilities

• flex-row / flex-col — main axis direction.
• flex-wrap / flex-nowrap — wrapping behavior.
• justify-start, justify-center, justify-end, justify-between, justify-around, justify-evenly — main-axis alignment.
• items-start, items-center, items-end, items-stretch, items-baseline — cross-axis alignment.
• gap-{n} — gap between flex items.

Item Utilities

• flex-1 — grow and shrink freely (shorthand for flex: 1 1 0).
• flex-auto — grow and shrink based on natural size.
• flex-none — prevent item from growing or shrinking.
• shrink-0 — prevent shrinking (common fix for icon sizing).
• self-center — align a single item on the cross axis.
• order-{n} — reorder items visually.

<nav class="flex items-center justify-between gap-4 px-6 py-4">
  <span class="font-bold text-lg">Brand</span>
  <ul class="flex items-center gap-6">
    <li>Home</li>
    <li>Courses</li>
  </ul>
  <button class="rounded-full bg-sky-600 px-4 py-2 text-white">Login</button>
</nav>