CSS Flexbox Generator
Design ToolsVisual flexbox playground with copyable CSS
.container{min-height:170px;background:#ede9fe;border-radius:12px;padding:10px}.item{min-width:56px;min-height:48px;padding:10px;background:#7c3aed;color:#fff;font:700 15px sans-serif;border-radius:8px;display:flex;align-items:center;justify-content:center}.item:nth-child(3n){min-height:80px;background:#a855f7}.item:nth-child(4n){background:#6d28d9}
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div>
The .item styles in the preview are only for display — copy .container for your layout. Preview styles are included at the top of the CSS box.
Embed this tool on your websiteFree
- Choose how tall the frame should be.
- Press Copy code.
- Paste it into your page, blog, WordPress or Notion HTML block.
The tool runs inside your visitor's browser, nothing is uploaded, and a small "Powered by ToolCloak" line stays under it. The second line (script) is optional: it makes the frame fit the tool's height.
Similar tools you may like
History
All history →CSS Flexbox Generator — at a glance
Visual flexbox playground with copyable CSS.
How to use it — step by step
Just your input — nothing to install or sign up for.
Pick the options
Choose direction, wrapping, alignment, gap and item count.
Watch the preview
The boxes move as you change each option.
Copy the code
Press Copy CSS (and Copy HTML) and paste into your project.
Pro tips
Small things that make the result better.
Quick facts
Frequently Asked Questions
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.
Is this tool really free?+
Yes — completely free, no signup, no watermark and no usage limit.