Flexbox Advanced

Advanced flexbox uses the flex-grow , flex-shrink , and flex-basis shorthand to control exactly how items share leftover space and reorder, letting you build production layouts like sticky footers, the holy-grail page, and equal-height card grids.

Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

By the end of this lesson you'll control exactly how flex items grow, shrink, and reorder themselves — and use that control to build the layouts real apps ship with: a sticky footer, the holy-grail page, and equal-height responsive card grids.

What You'll Learn

💡 Think of It Like This

A flex container is a row of passengers sharing a bench seat. flex-basis is how much room each person needs before anyone budges. flex-grow is appetite for the empty space — a passenger with flex-grow: 2 spreads out into twice as much of the leftover bench as a neighbour on flex-grow: 1 .

flex-shrink is who gives way when the bench gets crowded: a higher number means "I'll squeeze in first." So the flex shorthand — grow shrink basis — is really just three answers to: how big do I start, how eagerly do I expand, and how willingly do I compress? Nail those three and every layout in this lesson becomes obvious.

1. The flex Shorthand: grow, shrink, basis

Three properties decide how a flex item is sized. flex-basis is the item's starting size along the main axis (its width in a row). flex-grow says how much of any leftover space it absorbs, as a ratio against its siblings. flex-shrink says how much it gives up when there isn't enough room. You almost always set all three at once with the flex shorthand.

Shorthand

Means

Use it for

flex: 1

1 1 0%

Equal columns, ignoring content size

flex: auto

1 1 auto

Grow/shrink but respect content size

flex: none

0 0 auto

Fixed, never grows or shrinks

flex: 0 0 200px

0 0 200px

A rigid 200px sidebar

Run the worked example. The same three boxes are shown with different flex values so you can see grow ratios, a fixed item, and a basis-driven start size side by side.

2. Overriding One Item: align-self & order

align-items aligns every item on the cross axis. When you want one item to break ranks, align-self on that single child overrides the container's alignment just for it — handy for pushing one badge to the top while the rest sit centred.

order changes the visual position of an item without touching the HTML. Items sort by their order value (default 0 ), low to high. It is perfect for reordering on different screen sizes — but remember it only moves things visually, so keyboard and screen-reader order still follow your HTML.

3. Wrapping: flex-wrap , align-content & gap

By default flex items stay on one line and shrink to fit. Set flex-wrap: wrap and items that don't fit flow onto a new line instead — this is what turns a flex row into a responsive grid. Pair it with gap , which adds consistent spacing between items (and between wrapped rows) without the margin headaches.

Once items wrap onto multiple lines, align-content spaces those lines along the cross axis — think of it as justify-content but for whole rows. It does nothing on a single-line container, which trips up a lot of people. Run the example and shrink the preview to watch items wrap and the rows space out.

4. Nested Flex: the Holy-Grail Layout

Real layouts are flex containers inside flex containers. The classic "holy grail" — header, two sidebars, a main column, and a footer — is just a vertical flex column whose middle row is itself a horizontal flex row. The outer column uses flex: 1 on the middle band so it fills the height; the inner row uses fixed-basis sidebars and a flex: 1 main.

Note min-width: 0 on the main column — without it, long content would refuse to shrink and blow out the layout (more on that in Common Errors). On narrow screens, flex-wrap and a media query collapse everything into a single column.

5. Equal-Height Card Grid

Cards with different amounts of text usually end up different heights — ugly. Flexbox fixes it twice over. First, align-items: stretch (the default on the cross axis) makes every card in a row the same height automatically. Second, make each card itself a vertical flex column and put margin-top: auto on the footer button — the auto margin soaks up spare space and pins the button to the bottom, so buttons line up across cards of any length.

🎯 Your Turn #1 — A fixed sidebar with the flex shorthand

Build a two-column row: a rigid 220px sidebar that never resizes, and a main column that fills the rest. Fill in the blanks marked ___ , run it, and check the expected result in the comments.

🎯 Your Turn #2 — Wrap a grid and align one item

Turn a flex row into a wrapping grid with even spacing, then make the "featured" tile jump to the front using order . Fill in the blanks and verify the expected behaviour in the comments.

🧩 Mini-Challenge — Equal-height pricing cards from scratch

Support is faded now — only an outline is given. Build a row of pricing cards that stay equal height with their buttons aligned along the bottom. Use the worked examples in sections 3 and 5 as your reference if you get stuck.

⚠️ Common Errors (and the fix)

• Flex item overflows the page / won't shrink. Every flex item has min-width: auto by default, so a long word, a wide image, or a < pre > block stops it shrinking and blows out the layout. Fix: add min-width: 0 (or min-height: 0 in a column) to the item.
• Confusing flex-basis with width. Setting both width and flex-basis is contradictory — flex-basis wins for the initial main-axis size. Fix: inside a flex container, size items with the flex shorthand (e.g. flex: 1 1 280px ), not width .
• "flex: 1 made my cards tiny." flex: 1 is 1 1 0% — a zero basis — so items collapse to equal fractions and ignore a minimum width. Fix: give them a real basis: flex: 1 1 280px .
• align-content does nothing. It only spaces multiple lines . On a single-line container it has no effect. Fix: make sure flex-wrap: wrap is set and there is more than one row of items.
• order broke keyboard navigation. order moves items visually but not in the DOM, so tab order and screen readers still follow the HTML. Fix: write the HTML in a sensible reading order and use order only for small visual tweaks.

📋 Quick Reference

Goal

Use this

Equal columns (ignore content)

flex: 1;

Card that wraps, min 280px

flex: 1 1 280px;

Rigid 200px sidebar

flex: 0 0 200px;

Align one item differently

align-self: flex-end;

Reorder visually

order: -1;

Wrap onto new lines

flex-wrap: wrap;

Space wrapped rows

align-content: space-between;

Spacing between items

gap: 16px;

Pin a footer/button to bottom

margin-top: auto;

Stop overflow / allow shrink

min-width: 0;

❓ Frequently Asked Questions

🎉 Lesson Complete

You can now bend Flexbox to any layout. The essentials:

• ✅ flex: grow shrink basis — use flex: 1 for equal columns, flex: 1 1 280px for wrapping cards, flex: 0 0 200px for rigid sidebars
• ✅ align-self overrides one item's cross-axis alignment; order moves it visually (not for screen readers)
• ✅ flex-wrap: wrap + gap builds responsive grids; align-content spaces the wrapped rows
• ✅ Nest flex containers for holy-grail layouts and equal-height cards with margin-top: auto
• ✅ Remember min-width: 0 to stop content overflowing

Next up: CSS Grid Level 2 , where you'll handle true two-dimensional layouts that Flexbox can't do alone.

Practice quiz

Continue this course

• Previous: Responsive Typography
• Next: CSS Grid Level 2

Related lessons

• Flexbox Basics