HTMLCSS 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.
Ctrl+Enter to run | Ctrl+K to switch tools | Recent button shows input history
Repeating this work? Turn this kind of browser utility into an API batch, MCP prompt, extension workflow, or shared team recipe.
Buy Pro Browse tool packsFAQ
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.