Before Flexbox, centering an element vertically in CSS felt like a puzzle. Floats had clearfix hacks. Inline-block had whitespace quirks. Today, a two-line Flexbox declaration solves what used to take ten.

This guide walks through the properties you'll reach for most often — with copy-ready code patterns for real layouts.

What is Flexbox?

CSS Flexbox (Flexible Box Layout) is a layout mode that lets you arrange child elements in a row or column and control how they're sized, spaced, and aligned. You activate it by setting display: flex on a parent element:

.container {
  display: flex;
}

That's all it takes. Every direct child of .container now sits in a row, left to right, at its natural size.

The Properties You'll Use Most

flex-direction — change the axis

.container {
  display: flex;
  flex-direction: row;       /* left to right (default) */
  /* flex-direction: column;    top to bottom */
  /* flex-direction: row-reverse;  right to left */
}

justify-content — align along the main axis

When direction is row, this controls horizontal alignment:

.container {
  display: flex;
  justify-content: flex-start;   /* left (default) */
  /* justify-content: flex-end;     right */
  /* justify-content: center;       center */
  /* justify-content: space-between; equal gaps, no outer padding */
  /* justify-content: space-around;  equal gaps, with outer padding */
}

align-items — align along the cross axis

When direction is row, this controls vertical alignment:

.container {
  display: flex;
  align-items: stretch;     /* match tallest item (default) */
  /* align-items: center;      vertical center */
  /* align-items: flex-start;  top */
  /* align-items: flex-end;    bottom */
}

Perfect centering — the classic two-liner

.centered {
  display: flex;
  justify-content: center;   /* horizontal center */
  align-items: center;       /* vertical center */
  height: 100vh;
}

flex-wrap — let items wrap to the next line

By default items try to fit on one line and shrink. Add flex-wrap: wrap to let them flow naturally to the next row:

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

flex — control how children grow and shrink

.item {
  flex: 1;         /* grow equally to fill available space */
}

.sidebar {
  flex: 0 0 240px; /* fixed 240px, never grows or shrinks */
}

.main-content {
  flex: 1;         /* takes all remaining space */
}

Navbar pattern

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

Frequently Asked Questions

When should I use Flexbox vs CSS Grid?
Flexbox is built for one-dimensional layouts — a single row of nav links, a row of cards, a column of form inputs. CSS Grid is built for two-dimensional layouts — placing items across both rows and columns simultaneously. A common pattern is to use Grid for the overall page structure and Flexbox for individual components within it.
I always mix up justify-content and align-items. Any trick?
Think of it this way: justify-content controls the direction the items are flowing in (the main axis). align-items controls the perpendicular direction (the cross axis). With flex-direction: row, justify is horizontal and align is vertical. Swap the direction and they swap too.
Can I use Flexbox for responsive layouts without media queries?
Yes. The combination of flex-wrap: wrap and a minimum width on each item (e.g. min-width: 200px; flex: 1) creates a layout that automatically wraps from multi-column to single-column as the viewport narrows — no breakpoints needed. Add gap instead of margins for cleaner spacing.

Summary

  • display: flex on a parent activates Flexbox for all direct children
  • justify-content controls alignment along the main axis; align-items along the cross axis
  • Perfect centering in two lines: justify-content: center + align-items: center
  • flex-wrap: wrap + gap builds responsive card grids without media queries

Build and experiment with CSS layouts visually: