The Flexbox Playground is a visual CSS flexbox generator that lets you build one-dimensional layouts and read back the exact CSS as you go. Instead of guessing at property combinations, you toggle real container properties — flex-direction, justify-content, align-items, flex-wrap and gap — and watch a live preview reflow, then copy the generated rules straight into your stylesheet.
Flexbox works along a single axis at a time. flex-direction sets the main axis (row or column), justify-content distributes items along that main axis, and align-items positions them on the cross axis. This playground makes that mental model concrete: change direction from row to column and you'll see justify and align effectively swap the axes they act on, which is the single concept most developers stumble over.
It also exposes per-item controls — flex-grow, flex-shrink, flex-basis and align-self — so you can override a single child without touching the container. That covers the common real-world case of one sidebar that stays fixed while the main panel absorbs remaining space.
Building a layout step by step
- 1
Start with the container: pick a flex-direction (row, row-reverse, column, or column-reverse) to set the main axis your items flow along.
- 2
Distribute items on the main axis with justify-content — try space-between, space-around, space-evenly, center or flex-start — then set align-items (stretch, center, flex-start, baseline) to control cross-axis positioning.
- 3
Decide whether items should wrap: switch flex-wrap to wrap so children drop to a new line instead of overflowing, and set a gap value to space rows and columns without margins.
- 4
Select an individual item to fine-tune it with flex-grow, flex-shrink, flex-basis and align-self, overriding the container defaults for just that child.
- 5
Copy the generated CSS from the output panel and paste it into your project, adjusting selectors to match your markup.
When this tool earns its place
Navigation and toolbars
Lay out a logo, nav links and a call-to-action in a single row using justify-content: space-between, keeping everything vertically centered with align-items: center.
Responsive card grids
Combine flex-wrap: wrap with flex-basis and gap to build card rows that reflow to fewer columns as the viewport narrows, no media queries required for the basic behavior.
Holy-grail app shells
Use a fixed-basis sidebar (flex: 0 0 240px) next to a main panel that grows to fill remaining space (flex: 1), the classic fixed-plus-fluid split flexbox handles cleanly.
Teaching and debugging the axes
When a justify or align value isn't doing what you expect, flip flex-direction in the playground to see instantly which axis each property is acting on.
Practical notes and gotchas
- flex is shorthand for grow, shrink and basis. The common flex: 1 expands to 1 1 0%, which sizes items by available space rather than content — use flex: 1 1 auto if you want content width respected as the starting point.
- gap on flex containers is well supported in all modern browsers (since 2021), so prefer it over margins on children — it avoids the extra edge margin you have to strip off with :last-child.
- align-items: baseline aligns text baselines across items of different font sizes, which looks far more polished than center for rows of labels and values.
- Reordering with the order property or row-reverse only changes visual order, not DOM or tab order. Keep the source order logical so keyboard and screen-reader users get a sensible sequence.
- Watch out for flex-shrink: by default items shrink below their content size, which can squash text. Set flex-shrink: 0 on elements like icons or fixed-width buttons that should never compress.
Flexbox questions developers ask
What is the difference between justify-content and align-items?+
justify-content distributes items along the main axis (the direction set by flex-direction), while align-items positions them on the perpendicular cross axis. When flex-direction is row, justify-content controls horizontal spacing and align-items controls vertical; switch to column and they swap.
When should I use flexbox instead of CSS grid?+
Use flexbox for one-dimensional layouts — a single row or column of items, like a navbar or a button group. Use grid when you need to control both rows and columns at once, such as a full page template or a fixed matrix of cells.
How do I center an element both horizontally and vertically with flexbox?+
Set the container to display: flex, then justify-content: center and align-items: center. Both properties resolve to the center of their respective axes, placing the child in the middle of the container.
What does flex: 1 actually mean?+
It is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. The item starts from a zero basis and grows to share available space equally with other flex: 1 siblings, which is why several such items end up equal width.
Why does my flex item overflow instead of wrapping?+
By default flex-wrap is nowrap, so items stay on one line and shrink or overflow. Set flex-wrap: wrap on the container to let items move to a new line when they run out of room.
Does the gap property work on flexbox?+
Yes. gap (and its row-gap and column-gap components) works on flex containers in all current browsers, adding consistent spacing between items without margins. It has been widely supported since 2021.