Complete CSS Flexbox Guide — 2025 Edition

Flexible Box Layout (display:flex) is a one-dimensional layout model for arranging items either in a row or a column with fluid space distribution, powerful alignment, and easy re-ordering. It shipped across major browsers in 2017 and remains the go-to tool for navbars, card rows, centering tricks, and flexible UI bones.

Flex solves horizontal or vertical flow; if you need two axes, switch to Grid.

• Flex Container — element with display:flex or inline-flex.
• Flex Item — direct child of the container.
• Main Axis — direction items flow (flex-direction).
• Cross Axis — perpendicular to main.
• Free Space — remaining room after items’ base sizes.

.toolbar{
  display:flex;            /* establishes flex context */
  flex-direction:row;      /* row | row-reverse | column | column-reverse */
  flex-wrap:wrap;          /* wrap lines if needed     */
  gap:.75rem;              /* gutters between items    */
}

flex-flow shorthand row wrap ≈ flex-direction + flex-wrap.

Property	Axis	Role
justify-content	Main	Space between items as a group
align-items	Cross	Default alignment for each item
align-content	Cross	Space between lines (wrap)
gap	Both	Gutters between items/lines

.stack{
  display:flex;
  flex-direction:column;
  justify-content:center;  /* vertical centering */
  align-items:center;      /* horizontal centering */
  gap:1rem;                /* since Safari 14.1 fully supported  */
}

The gap shorthand is now universal in evergreen browsers; IE and early Safari require margin hacks or row-gap polyfills.

Five Core Item Properties

.item{
  flex-grow:1;    /* share free space */
  flex-shrink:1;  /* shrink if needed  */
  flex-basis:10rem;/* initial size     */
  align-self:start;/* cross-axis align */
  order:2;        /* visual order      */
}

Shorthand: flex

flex: <grow> <shrink> <basis>. Common presets:

• flex:1 ⟹ 1 1 0
• flex:auto ⟹ 1 1 auto
• flex:none ⟹ 0 0 auto

Set min-width:0 on items to prevent content-based overflow bugs.

.nav a:last-child{margin-left:auto} /* push to far edge */

Auto-margins absorb extra free space on the main axis, acting like justify-content on a per-item basis.

The new CSS Gap Decorations Module Level 1 (FPWD April 17 2025) adds row-gap-decoration and column-gap-decoration to draw lines, borders, or backgrounds inside the gutters—making separators trivial.

Auto-Wrapping Card Row

.cards{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(.5rem,2vw,1.2rem);
}
.card{flex:1 1 18rem}

Holy Albatross Technique

.holy{
  display:flex;
  flex-wrap:wrap;
}
.holy > *{
  flex:1 1 clamp(16rem,calc(33% - 1rem),100%);
}

This single rule yields 1-, 2-, or 3-column layouts without media queries.

Center Anything

.center{
  display:flex;
  justify-content:center;
  align-items:center;
}

Equal-Height Columns

.columns{
  display:flex;
  align-items:stretch;
}

Responsive Nav Bar

nav ul{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

• Overflow bug — set min-width:0/min-height:0 on flex items.
• Gap support — works everywhere post-Safari 14.1 (Apr 2021); older browsers need margin hacks.
• IE 11 — uses 2012 spec prefix with severe deviations; avoid or use polyfills.

DevTools overlay: Chrome, Edge, Firefox—toggle flex badges to inspect.

Title	Year	URL
CSS Flexible Box Layout Module 1 ED	2025	w3.org/…/css-flexbox-1
CSS Gap Decorations Level 1 FPWD	2025	w3.org/TR/css-gaps-1
gap property MDN	2025	developer.mozilla.org
Can I Use flexbox-gap	2025	caniuse.com/flexbox-gap