Flexbox

Live playground for direction, wrap, justify, align and per-item flex

About this tool

What is the Flexbox Playground for?
Learning and experimenting with CSS Flexbox interactively. Adjust flex-direction, justify-content, align-items, flex-wrap, gap, and individual item flex values via controls and see the result update live.
Can I add and remove flex items in the playground?
Yes. Add up to 12 items and control each item's flex-grow, flex-shrink, flex-basis, align-self, and order independently.
Does it output CSS I can copy?
Yes. The current layout configuration generates the full CSS for the container and each item class, ready to paste into your project.
Is there a visual guide to each property?
Each control includes a one-line description of what the property does, so it doubles as an interactive Flexbox reference.
About

Tap an item in the preview (or pill in the panel) to edit per-item flex properties. Use the reorder arrows in the item panel to change DOM order.

Main axis is horizontal; the cross axis runs perpendicular.