Flexbox: axes, justify/align, gap, flex-grow

Master Flexbox's two axes to align, center, and distribute your elements in everyday layouts.

9 min · 3 questions

Navigation bar, row of cards, aligned form: Flexbox is the everyday tool for one-dimensional layout. Everything rests on two axes: the main axis (set by flex-direction, horizontal by default) and the cross axis, perpendicular to the first. justify-content distributes elements along the main axis; align-items aligns them on the cross axis. Remember this duo: it solves the majority of cases. Let's take a classic navigation bar.

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Try it</button>
</nav>

A few declarations turn this list into a professional bar: space-between pushes the logo to the left and the button to the right, align-items: center vertically aligns elements of different heights, and gap spaces out the links with no margins to manage.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Mental exercise: if you switch .navbar to flex-direction: column, what does justify-content: space-between do? It now distributes the elements vertically, because the main axis has rotated. That's the classic Flexbox trap: justify-content and align-items don't mean "horizontal" and "vertical", but "main axis" and "cross axis". Another must-know use case: perfectly centering content.

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow distributes the remaining free space among elements. Concrete case: a layout with a fixed sidebar and content that fills everything else. flex: 0 0 240px locks the sidebar (it neither grows nor shrinks), while flex-grow: 1 lets the content absorb all the available space.

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

Knowledge check

Make sure you remember the key points of this lesson.

1. With flex-direction: column, what does justify-content control?
   • The horizontal alignment of elements
   • The vertical alignment, because the main axis has become vertical
   • The spacing between lines of text
2. Which combination centers an element both horizontally and vertically in a flex container?
   • text-align: center and vertical-align: middle
   • justify-content: center and align-items: center
   • margin: 0 auto on the container
3. In a flex container, .a has flex-grow: 2 and .b has flex-grow: 1. What happens?
   • .a is always exactly twice as wide as .b
   • .a receives twice as much of the remaining free space as .b
   • .b is hidden in favor of .a