Goal

You’ll understand the two core Flexbox properties well enough to arrange a row of items confidently, and know the difference between main-axis and cross-axis alignment, a distinction that explains a lot of Flexbox’s apparent quirks.

Learn

Flexbox solves a problem that plain block/inline layout struggles with: aligning and spacing a row (or column) of items easily, without fragile margin math or old float-based hacks.

display: flex; on a container turns its direct children into flexible items, arranged in a row by default (this direction is called the main axis; the perpendicular direction is the cross axis).

justify-content controls spacing and alignment along the main axis (horizontal, when in the default row direction):

• flex-start — items bunch at the start (this is the default behavior even without setting justify-content explicitly).
• center — items group together in the middle.
• space-between — first and last items sit flush against the container’s edges, with equal gaps only between items.
• space-around — similar, but also adds space at the outer edges, so items aren’t flush against the container.

align-items controls alignment on the cross axis (vertical, when in the default row direction):

• flex-start — items align to the top of the container.
• center — items align to the vertical middle, regardless of each item’s individual height. This is genuinely one of the most useful single lines in all of CSS, solving vertical-centering, a problem that was notoriously awkward before Flexbox existed.
• stretch — items stretch to fill the container’s full height (this is the default).

Understanding that these two properties control two different axes is the key insight: if your layout ever “flips” (for example, using flex-direction: column), the main axis becomes vertical and the cross axis becomes horizontal, so justify-content and align-items effectively swap which direction they visually control.

Decision Task

You have three icons that need equal space between them, with no extra space at the very start or end of the row. Before reading on: which justify-content value achieves exactly that, and how is it different from space-around?

Reveal the Answer

space-between — it places the first item flush against the start and the last flush against the end, with equal gaps only between items. space-around, by contrast, adds space on the outer edges too, so the first and last items aren’t flush against the container’s edges; each item effectively gets space on both sides, including the outermost ones.

Common Mistake

Forgetting that display: flex must be set on the parent container, not the items themselves. Setting flex-related properties like justify-content directly on the children, without the parent being a flex container, has no effect at all — the properties only mean something in the context of a flex container arranging its direct children.

Practice Questions

1. You want three buttons centered together as a tight group in the middle of a row, not spread apart from each other. Which justify-content value achieves this?

Show Answer

center.

2. Explain the difference in your own words between the main axis and the cross axis in a default (row-direction) flex container.

Show Answer

The main axis is the primary direction items are laid out in (horizontal by default); the cross axis is perpendicular to it (vertical by default) — justify-content controls the main axis, align-items controls the cross axis.

3. You set align-items: center; on a flex container with three items of different heights. What happens to their vertical alignment?

Show Answer

All three items align to the vertical middle of the container, regardless of their individual heights differing.

4. True or False: justify-content and align-items always control horizontal and vertical alignment respectively, no matter the flex-direction setting.

Show Answer

False — if flex-direction is set to column, the main axis becomes vertical and the cross axis becomes horizontal, effectively swapping which direction each property visually controls.

5. A developer sets justify-content: space-between; on a <div> that contains three child <span> elements, but nothing changes visually. What’s the most likely missing piece?

Show Answer

The parent <div> is missing display: flex; — without it, the container isn’t a flex container at all, so justify-content has no effect.

Try It Yourself

You want three items centered together as a group in the middle of a row, not spread apart. Which value: center, space-between, or space-around?

Show Answer

center — the other two both spread items apart; only center groups them together.

Quick Check

1. What property must be set on the container to enable Flexbox?

Show Answer

display: flex.

2. Which justify-content value leaves no gap at the container’s outer edges?

Show Answer

space-between.

3. What’s the difference between space-between and space-around?

Show Answer

space-between has no space at the edges, space-around does.

4. You want three items centered together as a group in the middle of a row, not spread apart. Which value: center, space-between, or space-around?

Show Answer

center — the other two both spread items apart; only center groups them together.

5. You have three icons that need equal space between them, with no extra space at the very start or end of the row. Before reading on: which justify-content value achieves exactly that, and how is it different from space-around?

Show Answer

space-between — it places the first item flush against the start and the last flush against the end, with equal gaps only between items. space-around, by contrast, adds space on the outer edges too, so the first and last items aren’t flush against the container’s edges; each item effectively gets space on both sides, including the outermost ones.