Cheat sheetCSS
Flexbox
One-dimensional layout: alignment, distribution, wrapping, and the gotchas interviewers love.
Container
css
.row {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
gap: 1rem;
justify-content: space-between; /* main axis */
align-items: center; /* cross axis */
align-content: flex-start; /* multi-line cross */
}Items
css
.item {
flex-grow: 1; /* take free space */
flex-shrink: 1; /* shrink when needed */
flex-basis: 0; /* starting size before free space */
/* shorthand: flex: grow shrink basis */
flex: 1; /* 1 1 0% */
align-self: flex-end;
order: 2; /* visual order — use carefully for a11y */
}Centering
css
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
}Main axis cheat
| flex-start | Pack toward start |
|---|---|
| flex-end | Pack toward end |
| center | Center |
| space-between | Equal space between items |
| space-around | Half-size space on ends |
| space-evenly | Equal space everywhere |
Interview tips
- ✓Default align-items is stretch — equal-height columns for free.
- ✓min-width: auto on flex items can prevent shrinking; min-width: 0 fixes overflow.
- ✓Prefer gap over margin hacks on children.
Common mistakes
- !Confusing justify-content (main) with align-items (cross).
- !Using flex when you need a full 2D grid.
- !Forgetting that order changes visuals but not tab/source order.