CSS Flexbox Tutorial: A Complete Flexbox Layout Guide

This css flexbox tutorial is the only reference you need to master one-dimensional layouts on the web. Understanding how to use flexbox transforms the way you build navbars, card grids, centered layouts, and form rows — with far less code than older methods. This flexbox layout guide covers every major property with practical examples.

What Is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed for distributing space and aligning items in one dimension — either a row or a column. You activate it with a single declaration on the container element:

.container {
  display: flex;
}

Every direct child becomes a flex item automatically.

The Flex Container Properties

flex-direction

Controls whether items flow in a row or a column:

.container {
  display: flex;
  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 */
}

justify-content

Distributes items along the main axis (horizontal for row, vertical for column):

.container {
  justify-content: flex-start;    /* pack at start (default) */
  justify-content: flex-end;      /* pack at end */
  justify-content: center;        /* center the group */
  justify-content: space-between; /* first & last touch edges, equal space between */
  justify-content: space-around;  /* equal space around each item */
  justify-content: space-evenly;  /* equal space between all gaps */
}

space-between is perfect for navbars. center is perfect for hero content. space-evenly is great for icon rows.

align-items

Aligns items along the cross axis (vertical for row):

.container {
  align-items: stretch;     /* default — fill cross-axis height */
  align-items: flex-start;  /* align to top */
  align-items: flex-end;    /* align to bottom */
  align-items: center;      /* vertically center */
  align-items: baseline;    /* align text baselines */
}

flex-wrap

By default, flex items squeeze into one line. Enable wrapping to let them flow to the next row:

.container {
  flex-wrap: wrap;         /* items wrap to next line */
  flex-wrap: nowrap;       /* default — no wrapping */
  flex-wrap: wrap-reverse; /* wrap in reverse order */
}

gap

Adds consistent spacing between items without margin hacks:

.container {
  gap: 1rem;           /* equal row and column gap */
  gap: 1rem 1.5rem;    /* row-gap column-gap */
}

The Flex Item Properties

flex-grow

Determines how much an item expands to fill available space:

.item { flex-grow: 0; } /* default — don't grow */
.item { flex-grow: 1; } /* grow to fill space */

If two items have flex-grow: 1 and flex-grow: 2, the second item takes twice the extra space.

flex-shrink

How much an item shrinks when the container is too small:

.item { flex-shrink: 1; } /* default — shrink proportionally */
.item { flex-shrink: 0; } /* never shrink */

flex-basis

The item’s initial size before growing or shrinking:

.item { flex-basis: auto; }   /* use the item's own width/height */
.item { flex-basis: 200px; }  /* start at 200px, then grow/shrink */
.item { flex-basis: 33.33%; } /* one third of container */

The flex Shorthand

Combine all three in one declaration:

.item { flex: 1; }          /* grow: 1, shrink: 1, basis: 0 */
.item { flex: 0 0 200px; }  /* fixed 200px, no grow or shrink */
.item { flex: 1 1 auto; }   /* grow and shrink freely */

Common Flexbox Patterns

Centered Layout (Perfect Centering)

The classic “center everything” problem, solved in three lines:

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

Navbar with Logo and Links

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Responsive Card Grid

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 280px; /* grow, shrink, minimum 280px */
  max-width: 400px;
}

This pattern creates a fluid grid that wraps naturally without media queries — a hallmark of great css flexbox technique.

Sidebar Layout

.page {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.sidebar {
  flex: 0 0 260px; /* fixed width sidebar */
}

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

Sticky Footer

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

main {
  flex: 1; /* push footer to bottom */
}

Alignment vs Distribution

A common source of confusion in how to use flexbox is the difference between justify-content and align-items. Remember:

• justify-content — distributes items along the main axis (the direction flex flows)
• align-items — aligns items along the cross axis (perpendicular to flex flow)

When flex-direction: column, the axes flip — justify-content becomes vertical and align-items becomes horizontal.

Tips for Real-World Flexbox

• Use gap instead of margins — gap only applies between items, never at the edges.
• min-width: 0 on flex items — prevents overflow with long text inside flex items.
• align-self overrides align-items for a single item — useful for one odd-sized card.
• Flexbox is one-dimensional — for complex two-dimensional layouts, consider CSS Grid.

Browser Support

Flexbox has been supported across all major browsers since 2015. There is no need for vendor prefixes in modern development targets.

Summary

This flexbox layout guide covered the full css flexbox toolkit: container properties (flex-direction, justify-content, align-items, flex-wrap, gap) and item properties (flex-grow, flex-shrink, flex-basis). Knowing how to use flexbox fluently unlocks fast, responsive layouts without float hacks or fixed pixel grids.

Use our free CSS Flexbox Generator to experiment with all these properties visually — see results in real time as you toggle settings.