Flexbox Generator
Learn and generate flexbox layouts with every property visualised.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 12px;
}
.item {
flex: 0 1 auto;
}About Flexbox Generator
Flexbox is the workhorse of one-dimensional layout, but the interaction between direction, justification and alignment is much easier to learn by watching than by reading.
Toggle any property in this generator and the live preview updates immediately, with per-item grow, shrink and basis controls and copy-ready CSS for both the container and its children.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis, align-items positions them on the cross axis. Flex direction decides which axis is which.
Why do my items not wrap?
flex-wrap defaults to nowrap, so items shrink instead of moving to a new line. Set it to wrap.
What does the flex shorthand mean?
It sets grow, shrink and basis in one declaration - flex: 1 means grow to fill, shrink if needed, starting from zero.