Content is loading…
Share
Build flexbox layouts visually and copy the CSS.
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 12px;
}Visually build CSS Flexbox layouts with live preview. Adjust flex-direction, justify-content, align-items, flex-wrap, and gap, add or remove flex items, and copy the generated CSS instantly. A hands-on way to learn and produce production-ready flexbox code. Fully client-side.
Share this tool
Visually create CSS box shadows with live preview and one-click copy.
Convert colors between HEX, RGB, and HSL formats.
Load and compare multiple URLs side by side in resizable iframes.