Stop 03 · HTML, CSS & JavaScript EssentialsTopics · 3/11

Flexbox

Part of the Full Stack Developer Roadmap

In short

Navbars, button groups, cards in a row, centring something perfectly. Flexbox handles all of it, and it's the layout tool you'll reach for most days.

A one-dimensional CSS layout system for arranging items in a row or column with powerful alignment and spacing controls — the workhorse of everyday UI layout.

The jaadu mascot drives a shared auto-rickshaw and waves three small passengers into evenly spaced seats.

Think of it like this

Passengers in a shared auto

In a shared auto, people line up on one seat. The driver can squeeze them together, spread them out, or push everyone to one side. Flexbox is the driver: it arranges items along one line and decides how the spare space is shared.

Watch it happen

How a flex navbar lays out

Main axis

Base size

Free space

Justify

Align

1/5display: flex makes a row by default, so the main axis runs left to right.

The big ideas

What you need to know

One direction at a time

Flexbox lays items out in a row or a column. flex-direction picks which one is the main axis.

justify-content

Spreads items along the main axis: start, center, space-between, and so on.

align-items

Lines items up on the other axis. align-items: center is the classic vertical centring trick.

gap and flex: 1

gap adds space between items without margin hacks. flex: 1 lets an item grow to fill what's left.

See it in code

Walk through the code

css

1.navbar {2  display: flex;3  justify-content: space-between; /* logo left, links right */4  align-items: center;            /* vertically centred */5  gap: 1rem;6}7 8.search { flex: 1; }               /* takes all the leftover space */9 10.center-me {11  display: flex;12  justify-content: center;13  align-items: center;14  min-height: 100vh;15}

1/3The navbar row: items pushed to both ends, centred vertically, with 1rem gaps.

Three lines of CSS on .center-me put its child dead centre, both ways. This used to take hacks.

Save yourself the pain

Common mistakes

Oops

Putting display: flex on the item you want to move.

Do this instead

Flex goes on the parent. The parent controls how its children are placed.

Oops

Adding margin-right to every item, then removing it from the last one.

Do this instead

Use gap on the flex container. It only adds space between items.

Your mission

Build three classic bars

~30 min

Quick check

In a flex row, which property moves items to the vertical centre?

Go deeper

1Build a navbar and a card row using only Flexbox.
2Practice `justify-content`, `align-items` and `gap` until they're automatic.
3Use Flexbox for any layout that's fundamentally a single row or column.