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

Flexbox is one of those CSS features that, once you truly understand it, makes you faster at building UIs. The problem is most people learn it by copying patterns without understanding the underlying mental model. That leads to hours of fighting it when something doesn’t work as expected.

This guide explains the model first, then the patterns. You’ll understand why things work, not just that they work.

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.

When you set display: flex on a container, you’re saying: “I want my children to be flexible along one axis.” Everything else — sizing, alignment, wrapping — flows from that.

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

The flex-direction determines the main axis. Everything perpendicular to it is the cross axis. This distinction is critical for understanding alignment properties.

The Main Axis and Cross Axis

This is the concept that confuses most people. You need to think in terms of axes, not rows/columns.

With flex-direction: row (default):

• Main axis → horizontal (left to right)
• Cross axis → vertical (top to bottom)

With flex-direction: column:

• Main axis → vertical (top to bottom)
• Cross axis → horizontal (left to right)

Why does this matter? Because justify-content always controls the main axis, and align-items always controls the cross axis — regardless of direction.

justify-content, align-items, align-content

These three properties trip up beginners because the names don’t make the axis relationship obvious:

Property	Axis	What it controls
justify-content	Main axis	Distribution of items along the direction of flex
align-items	Cross axis	Alignment of items perpendicular to flex direction
align-content	Cross axis	Distribution of lines when flex-wrap creates multiple rows/columns

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

align-content only takes effect when flex-wrap: wrap is set and there are multiple lines. If you have a single-line flex container, align-content does nothing.

The flex Shorthand

The flex shorthand sets three properties: flex-grow, flex-shrink, and flex-basis.

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

.item {
  flex: 1;         /* flex: 1 1 0 — grow, shrink, basis 0 */
  flex: 1 0 auto;  /* grow, no shrink, auto basis */
  flex: 0 0 200px; /* fixed 200px, no grow/shrink */
  flex: 2;         /* grow twice as fast as flex: 1 items */
}

Understanding what each part does:

• flex-grow: How much the item expands relative to siblings when there’s extra space (0 = don’t grow)
• flex-shrink: How much the item shrinks relative to siblings when there’s not enough space (0 = don’t shrink)
• flex-basis: The starting size before growing/shrinking. 0 means “start from zero and distribute all space via flex-grow.” auto means “start from the item’s natural content size.”

The practical difference between flex: 1 and flex: 1 1 auto:

/* flex: 1 — items share all space equally, starting from 0 */
.equal-split { flex: 1; }

/* flex: 1 1 auto — items start from their content size, then share remaining space */
.content-aware { flex: 1 1 auto; }

If you want truly equal-width columns, use flex: 1 (which sets basis to 0). If you want items to grow from their natural size, use flex: 1 1 auto.

Common Patterns

Center Anything

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

Sticky Footer

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

.main {
  flex: 1;
}

This works because flex: 1 on .main makes it expand to fill whatever space the footer doesn’t occupy.

Navigation Bar

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

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

Card Grid with Flexbox

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

.card {
  flex: 1 1 300px;
  max-width: 400px;
}

Note: For card grids where you want columns to align across rows, CSS Grid is better. Flexbox wrapping doesn’t guarantee column alignment.

Split Layout (Logo Left, Actions Right)

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

/* Alternative: push right-side items with margin-left: auto */
.header .actions {
  margin-left: auto;
}

margin-left: auto in a flex container consumes all available space, pushing subsequent items to the far edge.

The order Property

You can change visual order without changing DOM order:

.sidebar { order: -1; }
.main    { order: 0; }
.aside   { order: 1; }

This is useful for responsive layouts where you want the sidebar to appear after main content on mobile, but before it on desktop.

Gap Property

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

gap adds space between items but not at the edges. Combine with padding on the container for edge spacing.

Overflow and Minimum Size Bug

Here’s a common Flexbox bug that’s hard to search for: flex items have a minimum size of their content by default. This means a flex item containing a long word or a large image can overflow its container even if the container has a fixed width.

/* Bug: flex item overflows because of minimum size */
.flex-item {
  flex: 1;
}

/* Fix: set min-width: 0 to allow shrinking below content size */
.flex-item {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

If you’ve ever had text overflow a flex container even when you set overflow: hidden, min-width: 0 is the fix.

Flexbox for Form Layouts

.form-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row .flex-fill {
  flex: 1;
}

Nested Flex Containers

/* Card grid — outer is flex, inner cards are also flex */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cards .card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.card .card-body {
  flex: 1;
}

This ensures card footers (like CTA buttons) always align at the bottom, even when card bodies have different content lengths.

Intrinsic Sizing and flex-basis: auto

/* auto: item starts at its natural/intrinsic size */
.auto-basis {
  flex: 1 1 auto;
}

/* 0: item starts at zero, all space distributed proportionally */
.zero-basis {
  flex: 1 1 0;  /* shorthand: flex: 1 */
}

When you want genuinely equal-width columns regardless of content, use flex: 1. When you want items to respect their natural size and share remaining space, use flex: 1 1 auto.

Browser Support

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

Key Takeaways

• Flexbox works along one axis: the main axis (set by flex-direction) and its perpendicular cross axis.
• justify-content controls the main axis; align-items controls the cross axis.
• flex: 1 means “grow to fill, starting from zero.” flex: 1 1 auto means “grow to fill, starting from natural size.”
• min-width: 0 on flex items prevents content overflow bugs.
• margin-left: auto in a flex container pushes everything after it to the far end.
• For two-dimensional layouts, use Grid. For one-dimensional flow, use Flexbox.

FAQ

When should I use Flexbox vs CSS Grid? Use Flexbox for one-directional flow: navbars, button groups, inline lists. Use Grid when you need rows AND columns to stay aligned. Many layouts use both.

Why does justify-content: center not work sometimes? This usually happens when the flex container doesn’t have extra space. Check that the container has a defined width/height.

What’s the difference between align-items and align-content? align-items aligns items within a single line. align-content aligns multiple lines when flex-wrap: wrap creates multiple rows. If you only have one row, align-content has no effect.

How do I make a flex item take up exactly half the container?

.half { flex: 0 0 50%; }

Why do my flex children have unexpected sizes? Check flex-basis. The default is auto, which means the item starts at its content size. For equal sizes, set flex: 1 (basis 0) on all items.