CSS Flexbox Generator
The CSS Flexbox Generator lets you set flex-direction, justify-content, align-items, flex-wrap, align-content and gap on a container, preview up to 20 items live, and copy the generated CSS.
About this tool
The CSS Flexbox Generator lets you set flex-direction, justify-content, align-items, flex-wrap, align-content and gap on a container, preview up to 20 items live, and copy the generated CSS.
How to use it
- Choose the direction and wrapping.
- Set justify-content and align-items (and align-content for wrapped lines).
- Set the gap and number of preview items.
- Click Copy CSS to use the container rules.
Good to know
- justify-content aligns items along the main axis; align-items aligns them on the cross axis.
- flex-direction: column swaps the axes, so justify-content then works vertically.
- align-content only has an effect when items wrap onto multiple lines.
- The gap property works in Flexbox in all current major browsers.
- Flexbox is one-dimensional; use CSS Grid for rows and columns at the same time.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
How do I center a div with Flexbox?
On the parent, set display: flex; justify-content: center; align-items: center; — the child is centered horizontally and vertically.
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis (a row by default); align-items positions them along the cross axis.
When should I use Flexbox instead of Grid?
Use Flexbox for one-dimensional layouts such as navigation bars and button rows, and Grid for two-dimensional page layouts.
Why doesn’t align-content do anything?
align-content only applies when flex-wrap lets items wrap onto more than one line.