Learn and use flexbox by seeing it: change direction, wrapping, justify-content, align-items, align-content and gap, and watch numbered boxes move. Copy just the CSS you changed.
loading toolHow to use the flexbox playground
- Pick a preset or change the settings.
- Watch the live preview.
- Copy the CSS into your stylesheet.
Questions
justify-content or align-items?
justify-content spaces items along the main direction (a row: left to right). align-items lines them up across it (in a row: top to bottom).
How do I centre something?
Set justify-content: center and align-items: center on the parent.
Is my data private?
Yes. Everything happens inside your own browser: nothing you type or choose is uploaded to us or anyone else.
Is it free?
Completely free, with no sign-up, no watermark and no limit on how many times you use it. Light ads keep the site running.
