Skip to content
TextArray1.87.0
100% local

CSS flexbox generator

Build a flex container and its items visually, then copy the CSS, Tailwind classes or inline style.

Output
Related tools
CSS grid generatorDeveloper tools
CSS clamp() generatorDeveloper tools
CSS unit converterDeveloper tools
i18n key diffDeveloper tools
TOML to JSON converterDeveloper tools
SQL to JSONDeveloper tools
CSS flexbox generator
Set flex-direction, flex-wrap, justify-content, align-items and align-content with dropdowns, add a gap in any unit, and this tool writes the flex container rule for you — along with a matching rule for its items and a small text preview showing how the boxes line up. Use it to sketch a navbar, a card row, a form toolbar or any layout that needs items distributed, centered or wrapped without reaching for a full grid.
The item controls apply flex-grow, flex-shrink and flex-basis uniformly across the number of items you choose, which is exactly how most real flex rows work: one item class governing several boxes rather than one-off values per box. Align-content only appears in the output when flex-wrap is set to wrap or wrap-reverse, because browsers ignore it otherwise — the tool never prints a declaration that does nothing.
Pick the output format that matches how you build: plain CSS for a stylesheet, Tailwind utility classes (arbitrary-value brackets cover gaps and bases that don't sit on the default spacing scale), or an inline style attribute for a quick prototype or email-safe markup. Every value updates the moment you change an option, and the layout preview redraws with it — no build step, no external CSS to load.
Everything runs locally in your browser; nothing you configure here is sent anywhere. When the CSS looks right, copy it, download it as a .txt file, or send it back into the input to keep iterating with another tool.
FAQ
Does the flex-grow/shrink/basis setting apply to one item or all of them?
It applies to every generated item equally — the tool models the common case of one shared item class, not per-item overrides.
Why does align-content disappear when I switch to no wrap?
align-content only has an effect when the container wraps onto multiple lines. The tool leaves it out of single-line output so you never copy a rule that does nothing.
What does the text preview under the CSS represent?
A simplified, schematic sketch of item order and wrapping — useful for a quick sanity check, not a pixel-accurate render of spacing or sizing.
Can I use a unit other than pixels for the gap or flex-basis?
Yes. Type any valid CSS length or percentage — px, rem, em, % and so on are all accepted as typed.
Is my layout configuration uploaded anywhere?
No. The generator runs entirely in your browser — nothing you set here is sent to a server.