What is it?
The Flexbox Playground teaches flexbox by showing it: change direction, wrapping, justify-content, align-items, align-content and gap, and watch numbered boxes move. Copy just the CSS you changed.
Who is it for?
Students learning CSS layout, Blogger and WordPress users aligning items in a widget, and developers who keep forgetting which property does what.
How to use it
- Set the number of Boxes and the gap.
- Change each flex property and watch the preview.
- Tap Copy CSS and paste it on the container.
Memory aid
- justify-content works along the main direction (a row: left to right).
- align-items works across it (a row: top to bottom).
- Perfect centring:
display:flex; justify-content:center; align-items:center.
Errors and how to fix them
- Items don’t line up on the site: the CSS must go on the parent (container), not on the items.
- align-content does nothing: it only works when items wrap onto several lines.
- Items squash on phones: allow wrapping (
flex-wrap: wrap) or set a minimum width on items.
Questions people ask
- What does flex-wrap do? Lets boxes move onto a new line when they don’t fit, instead of shrinking.
- What is gap? Space between boxes, cleaner than margins.
Common recipes
- Space items evenly in a menu:
justify-content: space-between. - Cards that wrap on phones:
flex-wrap: wrap; gap: 16px.
Practical tip
Change one property at a time and watch what moves; it’s the quickest way to understand flexbox.
Open the tool: Flexbox Playground
Still stuck?
Contact support. Tell us which tool or page you were using, what you tapped, what you saw, and your phone or computer and browser (for example: Android phone, Chrome). We reply by email.
Questions, or an error not listed here?
Tell us in the comments: what you were doing, the exact message you saw, and your device and browser. We read every comment and add new fixes to this article.