CSS Flexbox Complete Guide: Every Property Explained with Examples

What is Flexbox?

CSS Flexible Box Layout (Flexbox) is a one-dimensional layout model that provides an efficient way to distribute space and align items in a container. It was designed to solve the layout problems that plagued CSS for years — vertical centering, equal-height columns, and responsive reordering.

Flexbox works along a single axis (row or column) and gives you powerful control over alignment, spacing, and ordering of child elements.

The Two Axes

Flexbox operates on two axes:

• Main axis — The primary axis along which flex items are laid out (horizontal by default)
• Cross axis — Perpendicular to the main axis (vertical by default)

Understanding these axes is key to mastering Flexbox.

Container Properties

These properties are applied to the flex container (parent element).

display: flex

.container {
  display: flex;
}

This turns the element into a flex container and its direct children into flex items.

flex-direction

Controls the direction of the main axis:

.container {
  flex-direction: row;            /* Default: left to right */
  flex-direction: row-reverse;    /* Right to left */
  flex-direction: column;         /* Top to bottom */
  flex-direction: column-reverse; /* Bottom to top */
}

flex-wrap

Controls whether items wrap to new lines:

.container {
  flex-wrap: nowrap;       /* Default: single line */
  flex-wrap: wrap;         /* Wrap to new lines */
  flex-wrap: wrap-reverse; /* Wrap in reverse */
}

justify-content

Aligns items along the main axis:

.container {
  justify-content: flex-start;    /* Pack items to the start */
  justify-content: flex-end;      /* Pack items to the end */
  justify-content: center;        /* Center items */
  justify-content: space-between; /* Equal space between items */
  justify-content: space-around;  /* Equal space around items */
  justify-content: space-evenly;  /* Equal space between and around */
}

align-items

Aligns items along the cross axis:

.container {
  align-items: stretch;    /* Default: stretch to fill */
  align-items: flex-start; /* Align to cross-start */
  align-items: flex-end;   /* Align to cross-end */
  align-items: center;     /* Center on cross axis */
  align-items: baseline;   /* Align text baselines */
}

gap

Adds spacing between flex items (modern replacement for margin hacks):

.container {
  gap: 16px;           /* Equal gap in both directions */
  gap: 16px 24px;      /* Row gap, column gap */
  row-gap: 16px;       /* Only row gap */
  column-gap: 24px;    /* Only column gap */
}

Item Properties

These properties are applied to flex items (children).

flex-grow

Controls how much an item grows relative to siblings:

.item { flex-grow: 0; } /* Default: don't grow */
.item { flex-grow: 1; } /* Grow to fill available space */
.item { flex-grow: 2; } /* Grow twice as much as flex-grow: 1 */

flex-shrink

Controls how much an item shrinks when space is limited:

.item { flex-shrink: 1; } /* Default: shrink equally */
.item { flex-shrink: 0; } /* Don't shrink */
.item { flex-shrink: 2; } /* Shrink twice as much */

flex-basis

Sets the initial size of an item before growing/shrinking:

.item { flex-basis: auto; }  /* Default: use width/height */
.item { flex-basis: 200px; } /* Start at 200px */
.item { flex-basis: 25%; }   /* Start at 25% of container */
.item { flex-basis: 0; }     /* Ignore content size */

The flex Shorthand

The flex shorthand combines grow, shrink, and basis:

.item { flex: 0 1 auto; }  /* Default */
.item { flex: 1; }         /* flex: 1 1 0 — grow equally */
.item { flex: auto; }      /* flex: 1 1 auto — grow based on content */
.item { flex: none; }      /* flex: 0 0 auto — rigid size */

align-self

Overrides the container's align-items for a single item:

.item { align-self: auto; }       /* Use container's align-items */
.item { align-self: flex-start; }
.item { align-self: flex-end; }
.item { align-self: center; }
.item { align-self: stretch; }

order

Changes the visual order without changing the DOM:

.item:nth-child(1) { order: 2; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 3; }

Common Layout Patterns

Centering (The Holy Grail)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navigation Bar

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

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

Card Grid (Responsive)

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

.card {
  flex: 1 1 300px; /* Grow, shrink, min 300px */
  max-width: 400px;
}

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* Takes all available space */
}

footer {
  /* Stays at bottom */
}

Sidebar Layout

.layout {
  display: flex;
}

.sidebar {
  flex: 0 0 250px; /* Fixed 250px width */
}

.content {
  flex: 1; /* Takes remaining space */
}

Equal Height Columns

.columns {
  display: flex;
  gap: 16px;
}

.column {
  flex: 1;
  /* All columns automatically have equal height! */
}

Flexbox vs Grid

Feature	Flexbox	Grid
Dimensions	1D (row OR column)	2D (rows AND columns)
Best for	Components, small layouts	Page layouts, complex grids
Content-driven	Yes	No (structure-driven)
Alignment	Excellent	Excellent
Browser support	Excellent	Excellent

Rule of thumb: Use Flexbox for components and one-dimensional layouts. Use Grid for page-level layouts and two-dimensional arrangements. They work great together.

Experiment with all Flexbox properties in our CSS Flexbox Playground tool.