Flexbox Playground

How to use it

1. Pick a flex-direction: row, column or one of the reversed variants.
2. Change justify-content and align-items to move the children along and across the main axis.
3. Switch flex-wrap to see how items behave when they run out of room.
4. Adjust the gap slider and the number of child items.
5. Copy the generated CSS block straight into your stylesheet.

Common use cases

• Learning the axes - build a mental model of main axis versus cross axis by watching items move live.
• Centering a card - combine justify-content and align-items center values and see the result before writing it.
• Choosing a spacing scheme - compare space-between, space-around and space-evenly side by side.
• Debugging a layout - reproduce a stubborn layout locally, then match your real styles to the working combination.

Why it stays private

The playground is pure DOM manipulation in your tab. No code is uploaded and nothing is tracked.

FAQ

Q: Which properties are covered? A: The five container-level properties: flex-direction, justify-content, align-items, flex-wrap and gap. Per-item properties such as flex-grow are not included to keep the generator output predictable.

Q: Does the generated CSS work in older browsers? A: The properties shown are part of the modern flexbox specification and are supported in all evergreen browsers. Gaps in flex containers require a reasonably recent browser; older Safari versions may need margin-based spacing instead.

Q: Can I try it on my own markup? A: The preview uses generated child items only. Apply the copied CSS to your own elements and iterate from there.