Flexbox Cheatsheet
A complete, practical reference for CSS Flexbox. Flexbox is a one-dimensional layout system: it distributes space along a single axis (a row or a column) and gives you powerful alignment on both axes. Bookmark this page — it covers every container property, every item property, and the recipes you reach for daily.
main axis (the direction items flow, set by flex-direction) and the cross axis (perpendicular to it). justify-content works on the main axis; align-items works on the cross axis. Almost every flexbox confusion comes from forgetting which axis is which.Container Properties (set on the parent)
Property | Values | What it does |
|---|---|---|
|
| Turns the element into a flex container; direct children become flex items |
|
| Sets the main axis direction |
|
| Allows items to break onto multiple lines |
| direction + wrap | Shorthand: |
|
| Distributes items along the main axis |
|
| Aligns items along the cross axis within a line |
|
| Distributes multiple wrapped lines on the cross axis (needs |
| length, or | Space between items — use this instead of margins |
/* The canonical flex container */
.container {
display: flex;
flex-direction: row; /* main axis: horizontal */
flex-wrap: wrap; /* allow wrapping */
justify-content: space-between; /* main-axis distribution */
align-items: center; /* cross-axis alignment */
gap: 1rem; /* spacing between items */
}justify-content Values Visualized
/* Main-axis distribution (row direction shown) */ justify-content: flex-start; /* |AAA BBB CCC | */ justify-content: flex-end; /* | AAA BBB CCC| */ justify-content: center; /* | AAA BBB CCC | */ justify-content: space-between; /* |AAA BBB CCC | edges touch */ justify-content: space-around; /* | AAA BBB CCC | half-space at ends */ justify-content: space-evenly; /* | AAA BBB CCC | equal everywhere */
align-items Values Visualized
/* Cross-axis alignment (in row direction = vertical alignment) */
align-items: stretch; /* items fill container height (default) */
align-items: flex-start; /* items sit at the top */
align-items: flex-end; /* items sit at the bottom */
align-items: center; /* items vertically centered */
align-items: baseline; /* text baselines line up — great for
buttons next to inputs of different sizes */Item Properties (set on the children)
Property | Default | What it does |
|---|---|---|
|
| How much of the leftover space this item absorbs, proportional to all grow values |
|
| How much this item shrinks when space is short (0 = never shrink) |
|
| The item's starting size on the main axis before growing/shrinking |
|
| Shorthand for grow shrink basis — always prefer the shorthand |
|
| Overrides the container's align-items for this one item |
|
| Visual reordering — lower numbers appear first |
The flex Shorthand Decoded
Shorthand | Expands to | Meaning |
|---|---|---|
|
| Grow and shrink equally, ignore content size — equal columns |
|
| Grow and shrink, but start from content size — bigger content gets more room |
|
| Rigid: never grow, never shrink |
|
| The default: don't grow, shrink if needed |
| — | Start at 200px, take double share of free space, shrink normally |
flex: 1 and flex: auto look similar but behave differently. flex: 1 sets flex-basis: 0, so all items end up the same size regardless of content. flex: auto starts from the content size, so items with more content end up wider.Recipe: Navbar
/* Logo left, links right, everything vertically centered */
.navbar {
display: flex;
align-items: center;
gap: 2rem;
padding: 0.75rem 1.5rem;
}
.navbar .links {
display: flex;
gap: 1rem;
margin-left: auto; /* pushes links to the far right */
}
/* margin-left: auto on a flex item eats all free space —
the classic way to split a flex row into two groups */Recipe: Perfect Centering
/* Center anything on both axes */
.center {
display: flex;
justify-content: center; /* main axis */
align-items: center; /* cross axis */
min-height: 100dvh;
}
/* Center a single child even more simply */
.center-child {
display: flex;
}
.center-child > * {
margin: auto; /* auto margins center on BOTH axes in flex */
}Recipe: Equal-Width Columns
.columns {
display: flex;
gap: 1rem;
}
.columns > * {
flex: 1; /* flex: 1 1 0 — every column identical width */
min-width: 0; /* allow content (long words, tables) to shrink */
}Recipe: Sticky Footer
body {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
main {
flex: 1; /* main grows, footer stays at the bottom
even on short pages */
}Recipe: Responsive Card Row (no media queries)
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.cards > .card {
flex: 1 1 250px; /* aim for 250px, grow to fill the row,
wrap when there's no room */
}Gotchas Checklist
min-width: auto — flex items refuse to shrink below their content size by default, so long words or wide images overflow. Fix:
min-width: 0(oroverflow: hidden) on the item.justify-content: space-betweenwith wrapped rows leaves an ugly gap when the last row has fewer items — usegapplusflex-grow, or switch to Grid.align-contentdoes nothing on a single line — it only distributes wrapped lines.orderchanges visual order only, not tab or screen-reader order — use it sparingly for accessibility reasons.Margins do not collapse between flex items, and
float,clear, andvertical-alignhave no effect on them.Percentage heights inside flex items can misbehave — prefer
align-items: stretch(the default) or explicit heights.In
flex-direction: column,justify-contentbecomes vertical andalign-itemshorizontal — the axes rotate with the direction.
Quick Decision Guide
You want… | Use |
|---|---|
Items in one row/column with smart spacing | Flexbox |
Content-driven sizing (nav, toolbar, tag list) | Flexbox |
Rows and columns aligned to a shared grid | CSS Grid |
Precise placement into a 2D template | CSS Grid |
Split one flex row into left/right groups |
|
One item aligned differently from siblings |
|
flex badge next to the element in the Elements panel to overlay the axes, free space, and gaps visually.Related pages: see the Grid cheatsheet for two-dimensional layouts, and Flexbox vs Grid for choosing between them.