Live
Grid Generator
Two-dimensional layouts for the cases flex can't reach.
Web · Free tool
Flexbox Generator
Arrange real children inside a real flex container — direction, spacing, alignment, wrap, gap — and copy the exact CSS that produces it.
Design a flex layout
Live preview
1
2
3
How it works
How flexbox works
One main axis, one cross axis
Direction picks the main axis: row lays children left-to-right, column stacks them top-to-bottom. Every other control positions children along one of those two axes.
Distribute and align
justify-content distributes free space along the main axis; align-items handles the cross axis. space-between, space-around, and space-evenly differ only in where the gutters sit.
Wrap and gap
wrap lets children flow onto new lines when they don't fit, and gap inserts even breathing room between them — replacing the old margin-instead-of-gap hacks.
Questions
Flexbox FAQ
What is the difference between justify-content and align-items?
Main axis vs cross axis. In a row, justify-content spaces items horizontally and align-items aligns them vertically; in a column they swap roles. Try the preview to see it instantly:
Why do items ignore align-items?
Unless you override it, align-items: stretch makes items fill the cross axis, so flex-start, center, or flex-end only become visible if the children have a fixed size on that axis.
When should I use flex-wrap?
When children have fixed widths and grow the container wider than its box. With wrap they flow onto the next line instead of shrinking or overflowing.