Build a flexbox layout
Build flexbox layouts visually: direction, wrap, justify, align and gap for the container and items, with live preview and copyable CSS. Free.
- Files never leave your device
- Free, no sign-up
- No watermark
About Flexbox Playground
Learn and build CSS flexbox layouts by seeing them. Change direction, wrapping, justify-content, align-items, align-content and gap on the container, add or remove items and adjust their individual properties, and watch the preview rearrange instantly. Copy the generated CSS when the layout is right. It is perfect for learning flexbox or prototyping a navigation bar or card row.
How to use Flexbox Playground
- 1
Set the container direction, wrap, justify, align and gap.
- 2
Add items and adjust their properties.
- 3
Watch the layout update.
- 4
Copy the generated CSS.
Why use this tool
- All main container properties.
- Per-item controls.
- Add and remove items.
- Instant visual preview.
- Copy-ready CSS.
Frequently asked questions
Flexbox is ideal for one-dimensional rows or columns. Use CSS Grid for two-dimensional layouts.
justify-content works along the main axis, align-items across it.
Use display: flex with justify-content: center and align-items: center.
Yes. Seeing each property change the layout is the fastest way to understand flexbox.
No. Everything is processed in your browser tab. Nothing you type or paste is sent to CodeMites or any other server.
Yes. There is no account, no watermark and no usage limit. The tool runs in your own browser, so there is no server cost to charge you for.
Yes. It runs in any modern browser on Android and iOS as well as on Windows, macOS and Linux, with nothing to install.
Yes. The Flexbox Playground gives you plain CSS, so it works in stylesheets, CSS modules, styled-components or inline styles in any framework.
Yes. Anything you create with this tool is yours to use in personal and commercial work, with no attribution required.
Related tools
All CSS & Design tools →- CSS Grid GeneratorDesign CSS Grid layouts visually: columns, rows, track sizes, gaps and item placement with live preview.
- CSS to Tailwind ConverterPaste CSS properties and get the equivalent Tailwind CSS utility classes instantly, ready to copy into your markup.
- CSS Animation GeneratorBuild CSS @keyframes animations visually: add keyframes with transforms and opacity, set timing and easing, preview live and copy the CSS.
- CSS Gradient GeneratorCreate linear and radial CSS gradients visually: pick colours, add stops, set the angle and copy the code.
- Box Shadow GeneratorDesign CSS box shadows visually with offsets, blur, spread, colour and multiple layers, then copy the code.
- Text Shadow GeneratorCreate CSS text-shadow effects such as glow, outline and 3D with up to five layers and presets.