Flexbox Playground
Experiment with CSS Flexbox properties in a live visual editor.
Container
Preview
1
2
3
Container CSS
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap: 8px;
}Items CSS
.item-1 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}
.item-2 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}
.item-3 {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
order: 0;
}Experiment with every CSS Flexbox property in a live visual editor. Adjust container and item properties, see changes instantly, and copy the generated CSS.
Key Features
Container Controls
Set flex-direction, flex-wrap, justify-content, align-items, align-content and gap.
Per-Item Controls
Click any item to set its flex-grow, flex-shrink, flex-basis, align-self and order.
Add/Remove Items
Add up to 10 colored flex items or remove them to test different scenarios.
CSS Export
Generates clean container and per-item CSS classes ready to copy.
How to Use
- 1Adjust the container properties using the dropdowns and gap slider.
- 2Click "+ Item" to add more items or "- Item" to remove.
- 3Click a numbered item in the preview to select it and edit its properties.
- 4Copy the Container CSS and Items CSS from the output panels.