BetterCSS

Flexbox distributes space along a single axis. One dimension is flexible, the other follows content.

When to use

Toolbars, nav bars, centered content, equal-height columns, and any row or column where items should share space.

Core concepts

  • The main axis follows flex-direction. justify-content distributes space along it.
  • The cross axis is perpendicular. align-items controls alignment on it.
  • Gap adds space between items without margin on each child.
  • flex-wrap lets items flow onto new lines when they run out of room.
  • Combine flex with gap, items-center, and justify-between for most UI rows, see class combinations below.

Class combinations

Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.

  • Toolbar layout

    flex items-center justify-between gap-4

    The classic header row: items vertically centered, space pushed to the edges, consistent gaps between controls.

  • Perfect center

    flex items-center justify-center min-h-dvh

    Centers content on both axes. Works when you want the whole viewport as the flex container.

  • Equal columns

    flex *:flex-1 gap-3

    Each child grows equally. Gap handles spacing, skip margin on every item.

Summary

  • Flexbox solves one-dimensional layout: distribute space along a single axis while the cross axis follows content or stretch rules.
  • Use flex when you need rows or columns that adapt: nav bars, toolbars, centered heroes, equal-height cards in a row.
  • justify-content controls main-axis distribution; align-items controls cross-axis alignment. They are independent.
  • gap is the modern way to space flex items. Prefer it over margin on children so spacing stays even when items wrap.
  • Tailwind maps directly: flex container + flex-row/col + justify-* + items-* + gap-*.