Generation STEM
Learning LibraryWebsite Development LibraryTeens

Flexbox: line things up and share out the space

Logo on the left, links on the right, everything level. That one-line description is surprisingly hard without the right tool. Flexbox is the right tool.

The big idea

A flex container lays its children out along one line and lets you control how they're spaced and aligned.

See it in code

1The basics

Add flex to a parent and its children line up in a row. gap-6 puts equal space between them:

html
<nav class="flex gap-6 p-6 text-sm font-medium text-slate-300">
  <a href="#about">About</a>
  <a href="#missions">Missions</a>
  <a href="#spotlight">Spotlight</a>
</nav>
Three links in a row:

flex goes on the container, and it's the children that move. gap only works on a flex or grid container; on anything else it does nothing.

2A step further

justify-between shares out the spare space along the row, pushing the first and last items to the far ends. items-center lines them up across it:

html
<header class="flex items-center justify-between bg-slate-900 px-6 py-4">
  <p class="text-lg font-bold text-violet-300">COSMOS</p>
  <a href="#missions" class="rounded-full bg-violet-600 px-4 py-2 text-sm font-semibold">Explore</a>
</header>
Two items, pushed apart and leveled:

justify- controls the main direction, along the row. items- controls the cross direction. The button is taller than the logo, and items-center keeps them level.

3On COSMOS

Flex containers nest. The header spreads three items apart, and the middle item is itself a flex row of links with its own gap:

html
<header class="flex items-center justify-between bg-slate-900 px-6 py-4">
  <p class="text-lg font-bold text-violet-300">COSMOS</p>
  <nav class="flex gap-6 text-sm font-medium text-slate-300">
    <a href="#about">About</a>
    <a href="#missions">Missions</a>
    <a href="#spotlight">Spotlight</a>
  </nav>
  <a href="#missions" class="rounded-full bg-violet-600 px-4 py-2 text-sm font-semibold">Explore</a>
</header>
The COSMOS navbar:

With three items, justify-between puts equal space between them, so the middle one lands in the center. Flex items always appear in the order they're written.

The same idea, everywhere

One-dimensional layout is everywhere in interfaces: toolbars, button rows, a label beside its field, a footer with a name on each side.

Try it yourself

Swap justify-between for justify-center, then justify-end, and watch where the group goes. Then add flex-col to the header and see the same items stack in a column.

The common mistake

Putting gap-6 or justify-between on an element that isn't a flex container. Without flex on the same element those classes are silently ignored.

What it unlocks

Flexbox handles one direction at a time. For rows and columns together use grid, and to change a layout at different screen sizes use responsive prefixes.

Related concepts