Professional CSS Flexbox playground with drag-and-drop reorder, container controls, per-item grow/shrink/basis/order, presets, and live CSS/HTML output.
Workspace
Drag items to reorder. Tune container and per-item flex props.
Presets
Container
Items · 4
Drag handles to reorder. Click an item in the preview to edit flex properties.
Playground
Drag · drop · select
Container + item rules
CSS outputcss | flexbox.css
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
padding: 16px;
}Markup
HTML structurehtml | flexbox.html
<div class="flex-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
</div>Keep exploring
Professional CSS Grid builder with editable tracks, gaps, alignment, item placement/spans, presets, and live CSS/HTML output.
Open toolDesign CSS borders with per-side width/style/color, linked or individual radii, presets, live preview, and IDE-ready CSS output.
Open toolClick a question to open it. Click again to close.
Looking for more? Browse Our Tools.