Flexbox Playground
Try CSS flexbox settings with a live preview, then copy the CSS or Tailwind classes. Direction, wrap, justify, align and gap. Free and private.
More options
Preview
CSS
Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)
Next steps
Done here? Use the Send to… menu on the result to carry it on to CSS Beautifier or CSS Minifier.
Free Online CSS Flexbox Playground and Generator
Change the flexbox settings and watch the boxes move. When it looks right, copy the CSS or the Tailwind classes. It gives developers a quick browser-based way to solve a focused flexbox playground task before moving the result into a project.
How to use the playground
Choose the direction, wrapping, how items line up and the gap. The preview shows boxes in a flex container. Add or remove boxes to test how it wraps.
Copy the code
Switch between CSS and Tailwind and copy the result into your project. Only settings that differ from the defaults are written.
Common mistakes
- Forgetting that justify and align swap when the direction is column.
- Expecting items to wrap without flex-wrap: they shrink instead, and can overflow.