VisaSpark
Sign in
beginner22 min

Flexbox Layout

Arrange elements along a row or column with Flexbox, controlling alignment, spacing, and wrapping with a handful of properties.

What you'll learn

  • Turn a container into a flex container with display: flex
  • Control alignment along the main and cross axes with justify-content and align-items
  • Control wrapping and spacing with flex-wrap and gap

Prerequisites

Explanation

Before Flexbox, centering a box vertically or evenly spacing a row of navigation links required a pile of workarounds. Flexbox turns those everyday layout problems into a small, learnable set of properties applied to a container and its direct children.

Turning On Flex

Adding display: flex; to an element does two things at once: it becomes a flex container, and every one of its direct children instantly becomes a flex item, lined up along a single row by default — no floats, no manual positioning required.

Two Axes

Flexbox thinks in terms of two perpendicular axes:

  • The main axis runs in the direction items are laid out — a row, left to right, by default. Set flex-direction: column to make the main axis run top to bottom instead.
  • The cross axis runs perpendicular to the main axis.

This distinction matters because two different properties control each axis:

  • justify-content aligns items along the main axis — common values include flex-start, center, space-between (push items to the edges, evenly space the rest), and space-around.
  • align-items aligns items along the cross axis — common values include flex-start, center, and stretch (the default, filling the full cross-axis size).

If you set flex-direction: column, the axes swap roles: justify-content now controls vertical spacing, and align-items controls horizontal alignment. Keeping "main axis = direction of flow" straight in your head makes both properties predictable regardless of direction.

Spacing and Wrapping

  • gap adds consistent space between flex items, without needing individual margins on each one — much simpler than the old margin-based tricks.
  • flex-wrap: wrap allows items to drop onto a new line when they run out of room on the main axis; the default, nowrap, forces everything onto a single line, shrinking or overflowing instead.

Sizing Individual Items

Beyond arranging items as a group, each flex item can be told how to share leftover space using the flex shorthand (commonly flex: 1 to let an item grow and fill available space) or fixed with flex: none. Early on, you'll get a long way with just display: flex, justify-content, align-items, and gap on the container — those four cover the overwhelming majority of everyday layouts like navigation bars, button groups, and centered content.

Flexbox is deliberately one-dimensional — it's built for arranging items along a single row or column. When you need rows and columns to work together as a grid, that's a job for CSS Grid, covered next.

main axis — justify-contentcross axisalign-items

Flexbox's two axes

A flex container has a main axis (a row by default, running left to right) controlled by justify-content, and a perpendicular cross axis (a column by default, running top to bottom) controlled by align-items. Setting flex-direction: column swaps which axis is which, so justify-content then controls vertical spacing and align-items controls horizontal alignment.

Example

A navigation bar built with Flexbox: a logo and a link list spaced apart and vertically centered.

<!doctype html>
<html>
  <head>
    <style>
      .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background: #222;
      }
      .navbar .logo {
        color: white;
        font-weight: bold;
      }
      .navbar ul {
        display: flex;
        gap: 16px;
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .navbar a {
        color: white;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <div class="logo">BrightPath</div>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#courses">Courses</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div>
  </body>
</html>

Try it yourself

Change justify-content to center or flex-end and press Run to see the layout shift.

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Guided exercise

Guided exercise

Turn #container into a flex container that centers its children horizontally: add display: flex; and justify-content: center;

Checks: #container has display: flex · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Independent exercise

Independent exercise

Make #row a flex container whose three .item children lay out left to right, spaced apart with justify-content: space-between and vertically centered with align-items: center.

Checks: #row is a flex container · #row uses justify-content: space-between · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Common mistakes

  • Forgetting that justify-content works along the main axis and align-items works along the cross axis — flex-direction swaps which is which.
  • Adding display: flex to the wrong element — it must go on the parent container, not the children you're trying to arrange.
  • Expecting flex items to wrap onto a new line automatically — by default flex-wrap is nowrap, so items shrink or overflow instead of wrapping.
  • Reaching for margin: auto tricks or manual positioning to center content, when a single justify-content/align-items pair on the container does it directly.

Knowledge check

Knowledge check

1. What does display: flex do to an element?
2. Which property controls spacing of flex items along the main axis?
3. By default, what is the main axis direction of a flex container?
4. Which property aligns flex items along the cross axis?

Takeaway

Flexbox turns 'please arrange these boxes in a row and space them nicely' from a pile of hacks into two or three clear CSS properties.

Summary

Setting display: flex on a container arranges its direct children along a main axis. justify-content controls spacing along that main axis, align-items controls alignment along the perpendicular cross axis, and gap plus flex-wrap handle spacing and wrapping — together covering most everyday one-dimensional layouts.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: CSS Grid Layout →