CSS Flexbox Playground

Summary

Tweak every flexbox container and item property with dropdowns, see the layout update live, then copy the generated CSS.

How it works

1. Use the Container panel to set flex-direction, flex-wrap, justify-content, align-items, align-content, and gap.
2. Click any colored box in the preview area to select it and edit its individual flex properties.
3. Use the Items panel to adjust flex-grow, flex-shrink, flex-basis, align-self, and order for the selected item.
4. Add or remove flex items using the plus and minus buttons.
5. Click "Copy CSS" to copy the generated container and item CSS to your clipboard.

Use cases

• Learning how each flexbox property affects layout visually.
• Quickly prototyping a flex-based UI layout before writing code.
• Debugging unexpected flexbox behavior by isolating properties.
• Generating boilerplate flexbox CSS to paste into a project.
• Teaching or demonstrating flexbox to junior developers.
• Comparing how justify-content vs align-items work on different axes.

Frequently Asked Questions