CSS Flexbox: Complete Guide

Flexbox is the most important CSS layout system you'll use as a frontend developer. It makes creating responsive layouts simple, predictable, and — once you understand it — actually enjoyable.

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout system. It arranges items in a row or a column and gives you powerful tools to control spacing, alignment, and sizing.

Before flexbox, we relied on floats and positioning hacks. Flexbox replaced all of that with clean, readable CSS.

The Two Players: Container and Items

Every flexbox layout has two parts:

1. Flex Container — the parent element with display: flex
2. Flex Items — the direct children of the container

.container {
  display: flex;
}

That single line turns all direct children into flex items. They'll line up in a row by default.

Container Properties

flex-direction

Controls the main axis — the direction items flow.

.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 */
}

justify-content

Aligns items along the main axis (horizontal for rows, vertical for columns).

.container {
  justify-content: flex-start;    /* pack items at start */
  justify-content: flex-end;      /* pack items at 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;  /* truly equal spacing */
}

Most used: center, space-between, and space-evenly.

align-items

Aligns items along the cross axis (vertical for rows, horizontal for columns).

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

flex-wrap

By default, flex items try to squeeze into one line. flex-wrap lets them wrap to new lines.

.container {
  flex-wrap: nowrap; /* default */
  flex-wrap: wrap;   /* items wrap to next line */
}

gap

The modern way to add spacing between items. No more margin hacks.

.container {
  gap: 16px;        /* same gap in both directions */
  gap: 16px 24px;   /* row-gap column-gap */
}

Item Properties

flex-grow

How much an item should grow relative to siblings when extra space exists.

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

If one item has flex-grow: 2 and another has flex-grow: 1, the first gets twice as much extra space.

flex-shrink

How much an item should shrink relative to siblings when space is tight.

.item {
  flex-shrink: 1; /* default — items shrink equally */
  flex-shrink: 0; /* don't shrink this item */
}

flex-basis

The starting size of an item before growing/shrinking.

.item {
  flex-basis: auto;  /* default — use content size */
  flex-basis: 200px; /* start at 200px */
  flex-basis: 0;     /* ignore content size, distribute space equally */
}

The flex Shorthand

The flex shorthand combines grow, shrink, and basis:

.item {
  flex: 1;       /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  flex: 0 0 200px; /* don't grow, don't shrink, 200px wide */
}

flex: 1 is the most common shorthand — it means "take up equal available space."

align-self

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

.special-item {
  align-self: flex-end; /* this item goes to the bottom */
}

Common Flexbox Patterns

Centering Everything

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

This is the simplest way to center anything on a page. Two lines of actual layout code.

Navigation Bar

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

Logo on the left, links on the right — done.

Card Grid That Wraps

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

.card {
  flex: 0 0 calc(33.33% - 16px);
}

Three cards per row that wrap to the next line on smaller screens.

Sticky Footer

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

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

The footer sticks to the bottom even when content is short.

Flexbox vs Grid

Feature	Flexbox	Grid
Dimension	1D (row OR column)	2D (rows AND columns)
Best for	Components, navbars, cards	Full page layouts, dashboards
Alignment	Along main/cross axis	Row and column tracks
When to use	Most of the time	When you need a 2D grid

Rule of thumb: Use flexbox for most things. Use grid when you need rows AND columns working together.

Key Takeaways

1. display: flex on the parent — that's how you start
2. justify-content and align-items handle 90% of alignment needs
3. flex: 1 means "take up available space"
4. gap replaces margin hacks for spacing
5. Flexbox is one-dimensional — use CSS Grid for 2D layouts

Flexbox isn't just a tool — it's the default way to build layouts in modern CSS. Master it, and you'll build faster and with fewer bugs.