Flexbox Playground

About Flexbox Playground

Change every Flexbox container property on a live row of items and watch the layout respond immediately. Flexbox is far easier to learn by manipulation than by reading, because the properties interact — what justify-content does depends entirely on flex-direction, and align-items works on the axis that direction did not claim. Here you can flip direction, justification, alignment, wrapping, and the gap, see the result instantly, and copy the CSS that produced it. It doubles as a reference for the moment you cannot remember whether the property you need is justify-content or align-items. Every value each property accepts is in the dropdown, so working through them one at a time is a fast way to see what the ones you never reach for actually do.

Key features

• flex-direction across all four values: row, row-reverse, column, and column-reverse
• justify-content with all six values, including space-between, space-around, and space-evenly
• align-items across stretch, flex-start, flex-end, center, and baseline
• flex-wrap with nowrap, wrap, and wrap-reverse
• Adjustable gap and item count, so you can test how the layout behaves as content grows
• Live preview that re-lays out on every change
• Copy-ready CSS for the container
• Complete value lists in every dropdown, including the ones that rarely come up — wrap-reverse, space-evenly, baseline
• Item count adjustable on the fly, which is how you find the point where a layout stops holding together
• Runs entirely in your browser

How to use it

1. Set flex-direction first — it decides which axis everything else works on.
2. Use justify-content to distribute items along that main axis.
3. Use align-items to position them on the cross axis.
4. Adjust the gap and item count to check how the layout holds up.
5. Copy the generated CSS.

Tips & common mistakes

• justify-content works on the main axis and align-items on the cross axis. With flex-direction: row the main axis is horizontal; switch to column and the two swap over. This is the single biggest source of Flexbox confusion.
• Use gap rather than margins on children. It only applies between items, so you never get the unwanted outer margin that margin-right leaves on the last element.
• align-items: stretch is the default, which is why equal-height columns come free with Flexbox and need no extra work.
• Flexbox is one-dimensional — a row or a column. When you need to control rows and columns together, CSS Grid is the right tool.
• flex-wrap: nowrap is the default, so items shrink below their content width rather than wrapping. If text is being squashed, wrap is usually what you wanted.
• margin-left: auto on a single flex child pushes it to the far end. It is the cleanest way to separate one item, such as pinning an action button to the right of a toolbar.
• row-reverse and column-reverse change the visual order without changing the DOM order, so keyboard and screen-reader users still meet the items in the original sequence. Reverse a layout for effect, never to fix an ordering problem.
• The properties here are all container properties. Sizing an individual item is a separate job for flex-grow, flex-shrink, and flex-basis on the child, usually written as the flex shorthand.
• Need a two-dimensional layout with rows and columns together? Use the CSS Grid Generator.

Related tools