CSS Flexbox Explained

Flexbox (the CSS Flexible Box Layout) is a layout system for arranging items in a single direction — a row or a column — and distributing space between them. It is the go-to tool for navigation bars, button groups, centring content, and any "line of things that should space out nicely." You turn it on with one line: display: flex.

The container and its items

Flexbox always involves two parts:

• A flex container — the parent element you set display: flex on.
• The flex items — its direct children, which Flexbox arranges.

/* The parent becomes a flex container.
   Its direct children automatically become flex items in a row. */
.nav {
  display: flex;
}

<nav class="nav">
  <a href="/">Home</a>
  <a href="/courses">Courses</a>
  <a href="/contact">Contact</a>
</nav>

That's it — the three links now sit in a row.

The two axes

This is the concept that unlocks Flexbox. A flex container has:

• A main axis — the direction items flow (horizontal by default).
• A cross axis — perpendicular to it (vertical by default).

The direction is set by flex-direction:

.container {
  display: flex;
  flex-direction: row;     /* default: items left to right (main axis = horizontal) */
  /* flex-direction: column;  flips it: items top to bottom */
}

Once you know which axis is which, two properties control alignment:

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

.toolbar {
  display: flex;
  justify-content: space-between;  /* spread items across the main axis */
  align-items: center;             /* vertically centre them on the cross axis */
}

justify-content accepts values like flex-start, center, flex-end, space-between, and space-around. align-items accepts flex-start, center, flex-end, and stretch.

Centring — finally easy

Centring content was famously awkward before Flexbox. Now it is two lines:

/* Perfectly centre a child both horizontally and vertically */
.hero {
  display: flex;
  justify-content: center;  /* centre on the main (horizontal) axis */
  align-items: center;      /* centre on the cross (vertical) axis */
  height: 100vh;            /* full viewport height so there's room to centre */
}

Wrapping and growing

By default, items stay on one line and may shrink. To let them flow onto multiple lines, use flex-wrap:

.gallery {
  display: flex;
  flex-wrap: wrap;   /* items move to the next line when they run out of room */
  gap: 16px;         /* clean spacing between items, rows and columns */
}

The gap property is the modern, clean way to space flex items — far better than adding margins to each child.

Individual items can also grow to fill space:

.search-bar {
  flex-grow: 1;   /* this item expands to take up remaining room */
}

Flexbox vs Grid

Flexbox is for one dimension — a row or a column. When you need rows and columns together (a true two-dimensional layout), reach for CSS Grid. They work beautifully side by side.

Common mistakes

• Applying justify-content to the items instead of the container. These alignment properties go on the flex container, not the children.
• Mixing up the axes. When you set flex-direction: column, justify-content now controls vertical positioning and align-items controls horizontal. The properties don't change — the axes do.
• Using margins for spacing instead of gap. gap is cleaner and avoids awkward edge margins.
• Expecting Flexbox to handle full page grids. For two-dimensional layouts, Grid is the right tool.

FAQ

Do I still need floats for layout? No. Floats were a workaround from an earlier era. For modern layout, use Flexbox and Grid.

Is Flexbox supported everywhere? Yes. Flexbox is supported across all current browsers and is safe to use in any new project.

Keep learning

• Hub: Web Fundamentals
• Related: CSS Basics for Beginners
• Next: CSS Grid Explained
• See also: Responsive Web Design Basics

Want to build for the web? Explore our courses in Jalgaon.