Flexbox Playground
Build flexbox layouts visually with live preview and CSS output.
Container
Items (3)
Preview
.container {
display: flex;
gap: 8px;
}How to Use the Flexbox Playground
Adjust the container properties — flex-direction, justify-content, align-items, flex-wrap and gap — using the dropdowns and slider. The live preview updates instantly.
Click + Add Item to add child items (up to 10). Select any item tab to configure its flex-grow, flex-shrink, flex-basis, align-self and order. You can also click items directly in the preview to select them.
When you are happy with the layout, click Copy CSS to copy the generated CSS for both the container and any customised items.
Frequently Asked Questions
What is CSS Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout model that lets you align and distribute space among items in a container, even when their sizes are unknown or dynamic.
What is the difference between justify-content and align-items?
justify-content controls alignment along the main axis (horizontal in a row, vertical in a column). align-items controls alignment along the cross axis (the perpendicular direction).
What does flex-wrap do?
By default items stay on one line (nowrap). Setting flex-wrap to wrap allows items to flow onto multiple lines when they exceed the container width.
What is flex-basis?
flex-basis sets the initial size of a flex item before free space is distributed. It works like width in a row layout or height in a column layout. The default value is auto.
Can I use this CSS in any project?
Yes. The generated CSS is plain, standards-compliant flexbox code that works in all modern browsers without any framework or preprocessor.
More CSS & Design
Color Picker
Pick colors visually and get HEX, RGB, and HSL values.
Open tool →Gradient Generator
Create CSS linear and radial gradients with a visual editor.
Open tool →Color Palette Generator
Generate harmonious color palettes from a base color.
Open tool →Text Shadow Generator
Create CSS text shadows with a visual editor and presets.
Open tool →Box Shadow Generator
Create CSS box shadows with a visual editor.
Open tool →Border Radius Generator
Create CSS border-radius with a visual corner editor.
Open tool →