CSS Flexbox Explained: Layout Without the Guesswork

Introduction

Before Flexbox, centring a box or spacing a row of items evenly meant floats, fiddly margins, and guessing. Flexbox was built for exactly this job: arranging items in one direction — a row or a column — and deciding how they share the available space.

If you can answer two questions — "which direction?" and "how should the space be shared?" — you can build most everyday layouts with Flexbox.

The container and the items

Flexbox starts with a parent element, the flex container. Setting display: flex on it turns its direct children into flex items, laid out in a row by default.

.nav {
  display: flex;
}

That one line already lines the children up side by side. Everything else is about controlling the spacing and alignment.

Main axis vs cross axis

Flexbox thinks in two axes, and mixing them up is the most common source of confusion:

• The main axis is the direction items flow: horizontal for a row, vertical for a column.
• The cross axis runs perpendicular to it.

Two properties control alignment, one per axis:

• justify-content aligns items along the main axis.
• align-items aligns items along the cross axis.

For a row, that means justify-content moves items left-right, and align-items moves them top-bottom. For a column, they swap roles.

.hero {
  display: flex;
  justify-content: center; /* Main axis: centre horizontally */
  align-items: center; /* Cross axis: centre vertically */
  height: 100vh;
}

That short block is the famous "centre anything" trick — no absolute positioning, no negative margins.

Spacing items out

justify-content has a few values worth memorising:

• flex-start — pack items at the start.
• center — pack items in the middle.
• space-between — first item at the start, last at the end, equal gaps between.
• space-around — equal space around each item.
• gap — a fixed gap between items, simpler than margins on every child.

.card-row {
  display: flex;
  gap: 16px;
}

gap is usually the cleanest choice for even spacing, because it does not add extra space at the edges the way margins do.

A real example: a navbar

<nav class="nav">
  <span class="logo">The Practical Developer</span>
  <a href="#">Home</a>
  <a href="#">Tutorials</a>
  <a href="#">About</a>
</nav>

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.logo {
  margin-right: auto; /* Pushes everything after the logo to the right */
}

margin-right: auto on the logo absorbs all the free space after it, which is the simplest way to get "logo on the left, links on the right" without a second container.

When not to use Flexbox

Flexbox handles one direction well. For a two-dimensional grid — rows and columns together, like a photo gallery — CSS Grid is the better tool. A good rule of thumb: Flexbox for a row or a column, Grid for a table-like layout. They work well together, and most real pages use both.

Takeaway

Set display: flex, pick a direction, then control the main axis with justify-content and the cross axis with align-items. Add gap for spacing, and you have covered most everyday layouts without floats or guesswork.

Originally published at https://practicaldevblog.blogspot.com/2026/10/css-flexbox-explained-layout-without.html