Hands-on demos, sliders, and presets for every flex property—learn, experiment, and master layouts with live feedback.
Every flex container has two axes. The main axis is set by flex-direction and the cross axis runs perpendicular.
flex-direction: row, main axis is horizontal. When column, it flips vertical. -reverse variants flip start/end.Distributes items along the main axis.
Aligns items along the cross axis. Items have different heights to show the effect.
stretch is the default — items expand to fill the cross axis. baseline aligns by text baseline.flex-wrap lets items wrap to new lines. align-content controls spacing of wrapped lines.
Controls how items grow to fill available space. A higher value = proportionally larger share.
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%.Controls how items shrink when the container is too small. Drag the slider to squeeze.
flex-shrink: 0 = refuses to shrink. flex-shrink: 3 = shrinks 3× faster than flex-shrink: 1.flex-basis sets the ideal size along the main axis. width always sets horizontal size regardless of direction.
column mode, flex-basis controls height (the main axis), while width still controls width. That's the key difference.Adds space between items without affecting outer edges. Drag to adjust.
Override the container's align-items for a single item.
Change visual order without touching HTML. Lower values come first.
Flex items have implicit min-width: auto preventing shrink below content size. This causes overflow.
min-width: 0 or overflow: hidden. Same goes for min-height: 0 in column layouts.A flex item can be a flex container itself. This is how complex layouts are composed.
See how flex reacts when items appear or disappear. The container redistributes space automatically.
Click any card to see the live demo + CSS. Patterns you'll use daily.
Both powerful — but for different jobs.
| Aspect | Flexbox | Grid |
|---|---|---|
| Dimension | One-dimensional (row or column) | Two-dimensional (rows and columns) |
| Approach | Content-first — items dictate layout | Layout-first — grid defines structure |
| Best for | Navbars, toolbars, card rows, centering | Page layouts, dashboards, galleries |
| Item sizing | Grow/shrink dynamically from content | Explicit tracks (fr, px, auto) |
| Alignment | Main axis + cross axis | Row axis + column axis + areas |
| Overlap | Not naturally | Easy with grid-area + z-index |
Mix all properties together. This is where it clicks.
Quick reference for every flexbox property.