Flexbox — The Complete Guide

.container {
  display: flex;
  /* every direct child of .container is now a "flex item" */
}

.row {
  display: flex;
  flex-direction: row;         /* main axis = horizontal, cross axis = vertical */
  justify-content: center;      /* centers items HORIZONTALLY */
  align-items: center;           /* centers items VERTICALLY */
}

.column {
  display: flex;
  flex-direction: column;      /* main axis = vertical, cross axis = horizontal */
  justify-content: center;      /* centers items VERTICALLY — same property, different axis! */
  align-items: center;           /* centers items HORIZONTALLY — same property, different axis! */
}

.a { flex-direction: row; }            /* default — main axis left to right */
.b { flex-direction: row-reverse; }     /* main axis right to left */
.c { flex-direction: column; }          /* main axis top to bottom */
.d { flex-direction: column-reverse; }  /* main axis bottom to top */

<div style="display: flex; flex-direction: row-reverse;">
  <button>First</button>
  <button>Second</button>
  <button>Third</button>
</div>

<!--
Visually renders: Third, Second, First
But Tab still moves focus First -> Second -> Third, because keyboard
navigation follows DOM order, not visual/painted order. A sighted
mouse user and a keyboard user can experience a genuinely different,
inconsistent sequence — this is a real accessibility consideration,
not a theoretical one.
-->

.a { justify-content: flex-start; }     /* default — items packed at the start */
.b { justify-content: flex-end; }       /* items packed at the end */
.c { justify-content: center; }          /* items packed in the middle, equal space each side */
.d { justify-content: space-between; }    /* first item at start, last at end, EQUAL gaps between (none at the outer edges) */
.e { justify-content: space-around; }      /* equal space AROUND each item — edge gaps are HALF the between-item gaps */
.f { justify-content: space-evenly; }       /* every gap — including the two outer edges — is exactly equal */

.a { align-items: stretch; }       /* default — items stretch to fill the container's cross-axis size */
.b { align-items: flex-start; }     /* items align to the top of the cross axis */
.c { align-items: flex-end; }        /* items align to the bottom */
.d { align-items: center; }           /* items centered vertically */
.e { align-items: baseline; }          /* items aligned by their text baseline — useful when items have different font sizes */

.gallery {
  display: flex;
  flex-wrap: wrap;
  height: 600px;            /* taller than the wrapped content needs, so there IS extra cross-axis space */
  align-content: space-between;  /* spreads the WRAPPED LINES apart from each other */
  /* align-items still controls alignment WITHIN each individual line */
}

.a {
  display: flex;
  flex-wrap: nowrap;   /* default — items squeeze/shrink to stay on one line, however cramped */
}

.b {
  display: flex;
  flex-wrap: wrap;   /* items that no longer fit flow onto a new line instead of shrinking indefinitely */
}

.c {
  display: flex;
  flex-wrap: wrap-reverse;   /* wraps, but new lines stack ABOVE the first line instead of below */
}

.container {
  display: flex;
  width: 900px;
}
.item-a { flex-grow: 1; width: 100px; }  /* base width before growing */
.item-b { flex-grow: 2; width: 100px; }
.item-c { flex-grow: 1; width: 100px; }

/*
Total base width used: 100 + 100 + 100 = 300px
Leftover space to distribute: 900 - 300 = 600px

The three flex-grow values (1, 2, 1) sum to 4 "shares."
Each share of the leftover 600px is worth: 600 / 4 = 150px

item-a gets 1 share:  100px + (1 × 150px) = 250px final width
item-b gets 2 shares: 100px + (2 × 150px) = 400px final width
item-c gets 1 share:  100px + (1 × 150px) = 250px final width

Final check: 250 + 400 + 250 = 900px — exactly fills the container.
item-b ends up exactly TWICE as wide as item-a and item-c combined
relative to their growth, because its flex-grow ratio is exactly double.
*/

.toolbar {
  display: flex;
}
.toolbar-title { flex-grow: 0; }   /* stays exactly its natural size */
.toolbar-spacer { flex-grow: 1; }   /* absorbs 100% of the leftover space — pushes the next item to the far end */
.toolbar-actions { flex-grow: 0; }  /* stays exactly its natural size */

/* This exact three-item pattern — a fixed title, an invisible flex-grow: 1
   spacer <div>, and fixed trailing action buttons — is one of the single
   most common real-world Flexbox layouts, used constantly for toolbars,
   headers, and any "stuff on the left, stuff pinned to the right" row. */

.container {
  display: flex;
  width: 500px;
}
.item-a { flex-shrink: 1; width: 300px; }
.item-b { flex-shrink: 1; width: 300px; }
.item-c { flex-shrink: 1; width: 300px; }

/*
Total base width: 300 + 300 + 300 = 900px
Container is only 500px — an overflow of 400px that must be removed.

With EQUAL flex-shrink values (1, 1, 1) and equal base widths, the
400px deficit is split evenly: each item shrinks by 400 / 3 ≈ 133px

item-a: 300 - 133 = 167px
item-b: 300 - 133 = 167px
item-c: 300 - 133 = 167px  (rounding — actual browser math is more precise)
*/

.layout {
  display: flex;
}
.sidebar {
  flex-shrink: 0;      /* never shrinks below its own width, no matter how narrow the container gets */
  width: 240px;
}
.main-content {
  flex-shrink: 1;       /* absorbs all of the shrinking */
  flex-grow: 1;           /* also expands to fill any leftover space */
}

.item {
  flex: 1 1 200px;
  /* flex-grow: 1   — willing to grow to fill space
     flex-shrink: 1 — willing to shrink (this is also the default)
     flex-basis: 200px — starting size before grow/shrink math runs */
}

/* The three most common shorthand patterns you will actually see: */
.equal-width-item { flex: 1; }          /* shorthand for flex: 1 1 0% — items split space perfectly equally, ignoring their content's natural size entirely */
.fixed-size-item   { flex: 0 0 200px; }  /* never grows, never shrinks, always exactly 200px regardless of container size */
.natural-then-grow { flex: 1 1 auto; }    /* starts at its natural content size, then grows/shrinks from there */

The marketing team ships a three-tier pricing table — Starter, Pro, Enterprise — as a horizontal row of cards. The "Pro" plan name is short. The "Enterprise" plan card, added a week later, needs an extra line of description text explaining custom SSO and dedicated support. As soon as it ships, the cards visibly stop matching widths: the Enterprise card is noticeably narrower than the other two, even though all three share the same CSS class.

.pricing-row {
  display: flex;
  gap: 24px;
}
.pricing-card {
  flex: 1 1 auto;   /* the culprit */
  padding: 32px;
  border-radius: 12px;
  background: white;
}

What the engineer finds

Exactly the distinction from Part 08's callout: flex: 1 1 auto starts each card's width from its own natural content size before growing — and the Enterprise card's extra sentence of description text gives it a larger natural content width than Starter or Pro. All three cards share the same flex-grow: 1, so they grow by equal amounts of extra space from there, but that equal amount is added on top of different starting sizes, so the final widths never converge to equal.

.pricing-card {
  flex: 1;   /* shorthand for flex: 1 1 0% — ignores each card's own content
                width as a starting point entirely, so all three grow from
                an identical zero baseline and end up genuinely equal-width */
  padding: 32px;
  border-radius: 12px;
  background: white;
}

The cards become pixel-identical in width regardless of how much copy any individual plan needs, and the fix survives the inevitable next update where a fourth "Team" tier gets added with yet another different amount of text. This exact flex: 1 vs flex: 1 1 auto distinction is one of the most common real Flexbox debugging sessions — "these should be equal width and they are not, despite identical CSS classes."