Stop 03 · CSS3Topics · 3/17

Flexbox

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 layout system for arranging items in a row or column with powerful alignment, spacing and ordering controls. Flexbox is especially strong for component-level alignment, distributing free space, handling variable item sizes, and building layouts that adapt naturally to changing content.

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. Keep the first version small, then add one improvement after the core behavior works.
2Practice `justify-content`, `align-items` and `gap` until they're second nature. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
3Do a set of Flexbox practice exercises until the properties feel automatic.