Flexbox Cheat Sheet
Skim by property → click Copy to grab the declaration → click # to deep-link a specific value. Need to build a layout instead? Jump to the Flexbox Generator.
Live playground
Pick each container property from the dropdowns + drag the sliders to see the CSS + preview update live. One playground, not per-row — experiment here, then use the property reference below to fine-tune.
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 8px;
}Container properties
These properties go on the flex container (the parent of the items you're arranging).
display
Makes an element a flex container. Every property below only works on children of an element with display: flex (or inline-flex).
flex-direction
Sets the main axis. Everything else (justify-content, align-items) works relative to this axis.
flex-wrap
Controls whether items overflow onto a new line when the container runs out of room.
justify-content
Aligns items along the MAIN axis (horizontal by default). Controls how leftover space is distributed.
align-items
Aligns items along the CROSS axis (vertical when direction is row). Applies within each line.
align-content
Only takes effect when flex-wrap creates multiple lines. Controls how the LINES themselves stack on the cross axis.
gapWidely available · 2021
Modern spacing property — works between items AND rows without the outer-edge margin problem. Baseline for flexbox since 2021.
Item properties
These go on the flex items themselves. Override the container's alignment or control how one item grows/shrinks differently from its siblings.
order
Reorders one or more items visually without touching the DOM. Default is 0. Negative values move items EARLIER; positive values LATER.
flex-grow
How greedily this item eats leftover space. 0 = never grow (default). 1+ = take proportional share of the extra space.
flex-shrink
How willingly this item gives up space when the container is too small. 0 = never shrink. 1 = shrink freely (default). 2+ = shrink faster.
/* default */ flex-shrink: 1flex-basis
The item's ideal starting size along the main axis, BEFORE any growing or shrinking. Like width, but respected by the flex algorithm.
flex (shorthand)
Sets flex-grow + flex-shrink + flex-basis in one declaration. Learn the 5 canonical values and you've covered 95% of real production flexbox.
/* default */ flex: 0 1 auto/* fluid, content-aware */ flex: 1 1 auto (== flex: auto)/* fixed, never resizes */ flex: none (== flex: 0 0 auto)See real demo → CSS 2 Column Left Fixed Right Fluid/* like default but explicit */ flex: initial (== flex: 0 1 auto)align-self
Overrides align-items for ONE item. Use when the container aligns siblings one way but you need a specific item to align differently.
Modern Flexbox (2026-ready)
Contemporary patterns that pair with flexbox — aspect-ratio for media tiles, container queries for reshape-by-own-width, and the min-width:0 trap every flexbox dev hits eventually. Each row shows the Baseline browser-support level so you know what's safe to ship.
aspect-ratio in flex itemsWidely available · 2022
Preserves media proportions without hard-coded height. Pairs naturally with flex: 1 for a row of equal-width tiles that all keep a 16:9 or 1:1 ratio.
Flex + container queriesWidely available · 2023
Reshape a flex layout based on ITS OWN container width, not the viewport. Essential for sidebar widgets or dashboard cards where viewport-based media queries lie about actual available space.
.card { container-type: inline-size }
@container (min-width: 320px) {
.card .body {
display: flex;
gap: 12px;
}
}
@container (max-width: 319px) {
.card .body {
display: flex;
flex-direction: column;
}
}min-width: 0 (the flex overflow trap)Widely available · 2015
Flex items default to min-width: auto which prevents shrinking below intrinsic content width. Long unbreakable strings (URLs, code, non-wrapping text) force the parent to grow beyond its declared size. The fix: min-width: 0 on the item so it can shrink. Also applies to Grid — same underlying rule.
About this tool
Every CSS flexbox property visualized on one scannable page — the 6 container properties (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) plus the 6 item properties (order, flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self). Now with a live playground you can pick each property from and drag sliders in to see the CSS update in real time, plus a Modern Flexbox section covering aspect-ratio in flex items, container queries, and the min-width:0 overflow trap — every modern-feature section carries a Baseline browser-support chip so you know exactly what's safe to ship. Every row has an anchor id you can deep-link to (e.g. #justify-content-center, #aspect-ratio-square), a copy button that grabs the CSS declaration, and a live visual demo. Reference chart + interactive playground — when you need to BUILD a full layout, jump to the CSS Flexbox Generator (linked from every property section).
Why a cheat sheet (and not just the generator)
How to use this cheat sheet
Canonical recipes — copy-paste ready
/* Sticky footer — footer pins to viewport bottom even
when main content is short. */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }/* Holy grail — header, footer, main + two sidebars,
the middle row expands to fill remaining height. */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.middle {
display: flex;
flex: 1;
}
.middle > main { flex: 1; }
.middle > aside { flex: 0 0 240px; }/* Perfectly centered card — the 2020s way. */
.viewport {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card { max-width: 400px; }/* Equal-width cards row that wraps on narrow viewports. */
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.cards > .card {
flex: 1 1 240px; /* grow / shrink / basis */
}/* Fixed sidebar + fluid main content. */
.shell {
display: flex;
min-height: 100vh;
}
.shell > aside {
flex: 0 0 260px; /* fixed width, no grow/shrink */
}
.shell > main {
flex: 1;
min-width: 0; /* lets long content shrink */
}Pro tips (the gotchas most tutorials skip)
Frequently asked questions
I already use the CSS Flexbox Generator — do I need the cheat sheet too?
They're two different tools for two different moments. The CSS Flexbox Generator is a build-tool — you pick values, drag sliders, see a live preview, and export the CSS block for a specific layout you're constructing. Reach for it when you're building a NEW layout and want to explore values interactively. The cheat sheet is a reference chart — every property, every value, every visual, on one scannable page with anchor links. Reach for it when you already know which property you need but forget which value does what (e.g. "is it space-around or space-evenly that puts equal space around every item?"), or when you want to bookmark ONE URL you can Ctrl+F on for the rest of your career. Most working devs use both: cheat sheet for the 10-second lookup, generator for the 5-minute build. That's why they cross-link at the top of each page.
What's the difference between flex-grow, flex-shrink, and flex-basis? When do I use the flex shorthand?
These three properties control how a flex item sizes itself along the main axis. flex-basis is the item's ideal starting size before any growing or shrinking (like width but respected by the flex algorithm). flex-grow is how greedily the item eats leftover space when the container has more room than the sum of all basis values — 0 means "never grow", 1+ means "take proportional share of the extra space". flex-shrink is the mirror: how willingly the item gives up its space when the container has less room than everything wants — 0 means "never shrink", 1+ means "shrink proportionally". The flex shorthand sets all three at once: flex: 1 expands to flex: 1 1 0 (grow greedily, shrink freely, ignore intrinsic size — the pattern for equal-width fluid columns); flex: 0 1 auto is the default (don't grow, shrink freely, size to content); flex: none expands to flex: 0 0 auto (fixed size, never resize); flex: auto expands to flex: 1 1 auto (grow and shrink but start from content size). The one to remember: flex: 1 for equal columns, flex: 0 0 auto for a fixed-width sidebar. See the flex-shorthand row of the cheat sheet for all 5 canonical values side-by-side.
align-items vs align-content vs align-self — when does each one apply?
Three separate properties, three separate scopes. align-items is on the CONTAINER and controls how EVERY item aligns on the cross axis (perpendicular to flex-direction). Applies to single-line AND multi-line containers, but on multi-line containers it only affects alignment WITHIN each line, not the space between lines. align-content is on the CONTAINER and controls how MULTIPLE LINES align when flex-wrap: wrap creates them — it only takes effect when there are 2+ lines. On a single-line flex container align-content does nothing. align-self is on an ITEM and overrides the container's align-items for just that one item. Common use: container has align-items: center but ONE item needs to stretch — set align-self: stretch on that item. Decision rule: styling every item the same way → align-items on the container; styling how multi-line groups sit → align-content on the container; styling ONE item differently from siblings → align-self on the item.
When should I use justify-content: space-between vs space-around vs space-evenly?
All three distribute leftover space between items, but they treat the container edges differently. space-between puts ZERO space at the container edges — the first item sits flush against the start, the last against the end, and equal gaps sit between them. Best for nav bars where the logo pins to the left and the CTA pins to the right, or footer link groups where you want the outermost items at the outermost positions. space-around gives each item HALF a gap on the outside — so edge gaps are half the size of between-item gaps. Rarely the right answer; the asymmetric spacing reads as visually broken because the perceived space between items is bigger than the space around the edges. Use only when you specifically want the "outer padding is smaller than inner gap" look. space-evenly makes ALL gaps equal — outer edges get the same gap as between items. This is the modern default when you want visually-consistent breathing room throughout, e.g. an evenly-spaced icon row where the outer icons don't feel crammed into the corners. Baseline browser support: space-evenly landed in Firefox 52 (2017), Chrome 60 (2017), Safari 13 (2019) — safe to use in any 2026 project.
Should I use gap or margin for spacing flex items?
Use gap. The gap property landed in flexbox with Chrome 84 (2020), Safari 14.1 (2021), Firefox 63 (2018) — all fully baseline for 2026 production. It has THREE decisive advantages over the old margin-based approach: (1) no edge-margin problem — margins between items also create margin at the outer edges of the container, forcing you to either negative-margin the container or use ugly :first-child / :last-child selectors to strip the outer margin. gap only puts space BETWEEN items, never on the edges. (2) works with wrapping — margin on a wrapping flex container creates asymmetric spacing between rows because vertical margins collapse (well, they don't in flex, but the effect is still messy). gap gives you clean equal spacing whether items wrap to 1 row or 10. (3) separate row-gap + column-gap — you can say gap: 8px 24px for tight vertical spacing but generous horizontal spacing. Impossible with margin without CSS custom properties gymnastics. Only use margin on flex items when you need ONE item to have different spacing from its siblings (e.g. margin-left: auto to push a nav item to the right — a legitimate use case). For everything else, gap wins.
Does this cheat sheet work with Tailwind, React, Vue, or my framework of choice?
Yes — because it teaches vanilla CSS flexbox, which is what every framework wraps. The Tailwind flex utilities are 1:1 mappings of the properties in this cheat sheet: flex = display: flex, flex-row = flex-direction: row, justify-between = justify-content: space-between, items-center = align-items: center, gap-4 = gap: 1rem, etc. Anything you can build with Tailwind's flex classes maps back to the CSS properties on this page. Same for CSS-in-JS libraries (styled-components, emotion, vanilla-extract) — they emit the same CSS underneath. React, Vue, Svelte, Astro, Next.js, Nuxt, SvelteKit, Remix, Solid — all render into HTML+CSS, and flexbox is a CSS property, so it applies everywhere. The cheat sheet is framework-agnostic on purpose: learn flexbox once, apply everywhere. If your framework's grid/layout primitive obscures the underlying CSS (some MUI/Chakra components do this), come back to this cheat sheet to remember what the underlying property actually does.