Learn / HTML & CSS Fundamentals / Flexbox
Lesson 4 of 6

Flexbox

Think of people lining up at a checkout counter. They can be told to line up in a single row, spread evenly apart, all centered, or squeezed to one side — and if someone leaves, everyone else shuffles to fill the gap automatically. That's the whole spirit of Flexbox: you stop calculating pixel positions for each item, and instead tell the group as a whole how to arrange itself along one line.

💡 The Bottom Line

Flexbox is a one-dimensional layout system: turn any element into a display: flex container, and its direct children — the flex items — line up along a main axis, which you control with justify-content (spacing along that axis) and align-items (positioning on the cross axis). Most everyday "align these things in a row" or "center this box" problems are two or three lines of Flexbox.

Container vs. items

<div class="toolbar">
  <button>Save</button>
  <button>Cancel</button>
  <button>Delete</button>
</div>
.toolbar {
  display: flex;
  gap: 10px;
}

The .toolbar is the flex container — that's where you set display: flex. Its three direct children (the buttons) automatically become flex items, laid out in a row by default, with no floats, no manual widths, no display: inline-block spacing hacks.

Main axis vs. cross axis

By default the main axis runs horizontally (left to right) and the cross axis runs vertically. Two properties control each:

.toolbar {
  display: flex;
  justify-content: space-between; /* push items to opposite ends */
  align-items: center;            /* vertically center them */
}

⚠️ Watch Out

It's easy to mix up which property controls which axis, especially once you change flex-direction: column — at that point the main axis becomes vertical, and justify-content now controls vertical spacing while align-items controls horizontal. The properties don't move; the axis they refer to does. Always check flex-direction first before debugging alignment.

Common one-line layout patterns

/* Perfectly centered box, both directions */
.center-me {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Classic navbar: logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
}

/* Equal-width columns that share leftover space */
.columns {
  display: flex;
}
.columns > div {
  flex: 1;
}

flex: 1 on the children is the one-liner that used to take a page of float and width percentage math — every child grows to share the available space equally.

🙋 There Are No Dumb Questions

Q: If flex items automatically wrap to fill space, why would I ever need Grid instead?
A: Flexbox is one-dimensional — it's great at arranging items along a single row or column, but it doesn't understand rows and columns at the same time. The moment you need items to line up precisely in both directions, like a photo grid or a dashboard, Grid becomes the better tool. More on that next lesson.

🔧 Try It Yourself

Build three <div> boxes inside a container. Make the container display: flex, then experiment with justify-content set to flex-start, center, and space-between — reload after each change and notice exactly how the boxes redistribute themselves along the row.

✅ Quick Check

You set display: flex; flex-direction: column; on a container. Which property now controls vertical spacing between the items?

Next up: Flexbox handles one row or one column beautifully — but what about a layout that needs to line up in rows and columns at once? That's CSS Grid.

← Back to
Next →