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.
Ctrl+Enter to run · Ctrl+K to switch tools · Recent button shows input history
Let AI do the hard part. Fix broken HTML, convert to email-safe HTML, or clean up any markup in one click — 3 free AI runs per day, no account needed.
Try the AI HTML FixerFAQ
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.