DEV Community

楊東霖
楊東霖

Posted on • Originally published at devplaybook.cc

Flexbox Master Guide: The Modern Way to Build Layouts in 2026

#webdev #programming #productivity #devtools

Flexbox Master Guide: The Modern Way to Build Layouts in 2026

The One-Dimensional Model

Flexbox is a one-dimensional layout method. It works on either a row OR a column, not both simultaneously. For two-dimensional control, use CSS Grid.

.container {
  display: flex;
  flex-direction: row;    /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;       /* nowrap | wrap | wrap-reverse */
}
Enter fullscreen mode Exit fullscreen mode

The flex Shorthand 

/* flex: <grow> <shrink> <basis> */

.item {
  flex: 1;         /* flex: 1 1 0 — grow, shrink, basis 0 */
  flex: 1 0;       /* flex: 1 0 auto — basis defaults to auto */
  flex: 0 0 200px; /* fixed 200px, no grow/shrink */
  flex: 1;         /* flex: 1 1 0 — all available space */
}
Enter fullscreen mode Exit fullscreen mode

Justify vs Align

Property Axis What it controls
justify-content Main axis (direction) How items are distributed along the main axis
align-items Cross axis (perpendicular) How items are aligned on the cross axis
align-content Cross axis How lines are distributed when multiple lines exist

Common Patterns

Center Anything 

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Sticky Footer 

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main { flex: 1; }  /* Footer pushes to bottom */
Enter fullscreen mode Exit fullscreen mode

Card Grid with Flexbox 

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* Grow, shrink, min-width 300px */
}
Enter fullscreen mode Exit fullscreen mode

Navigation Bar 

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Gap Property 

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;           /* row-gap + column-gap */
  row-gap: 8px;        /* override row gap */
  column-gap: 24px;    /* override column gap */
}
Enter fullscreen mode Exit fullscreen mode

Browser Support

Flexbox has 98%+ global support. No prefixes needed in 2026. Use it freely.

Level Up Your Dev Workflow

Found this useful? Explore DevPlaybook — cheat sheets, tool comparisons, and hands-on guides for modern developers.

🛒 Get the DevToolkit Starter Kit on Gumroad — 40+ browser-based dev tools, source code + deployment guide included.

Top comments (0)