Log in Start free

CSS Flexbox Generator

Configure every Flexbox property through a visual UI and see the result live. Set flex-direction, flex-wrap, justify-content, align-items, align-content, gap, and per-item flex-grow/shrink/basis/align-self. Add or remove flex items and copy the generated CSS for the container and each item.

Runs in your browser Nothing uploaded Free, no signup

Everything stays in this browser

CSS Flexbox Generator: questions

What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (horizontal by default); align-items aligns them along the cross axis (vertical by default).
flex-grow vs flex-basis?
flex-basis sets the initial size of an item before space is distributed. flex-grow determines how much of the remaining space the item takes. flex-shrink controls how it shrinks when there is not enough space.
When should I use Flexbox vs Grid?
Flexbox is best for one-dimensional layouts — rows OR columns. CSS Grid is better for two-dimensional layouts with both rows and columns defined.
All 112 free tools
CSS Minifier & BeautifierCompress or format CSS SVG OptimizerMinify and clean SVG markup Website Accessibility AuditCrawl a page for WCAG risks CSS Grid GeneratorVisual grid layout builder SVG to CSS Data URI EncoderSVG as background-image Color Palette GeneratorPalettes from one color

Made something with AI? Share it as a private link.

Drop in the HTML from Claude, ChatGPT or any editor and get a link your client can open anywhere — with a password, view tracking, comments and approval.

Publish your HTML HTML to link