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.
How Flexbox Generator works in your browser
Container properties — direction, wrap, justify-content, align-items and gap — and per-item grow, shrink and basis are applied to a real flex container in the preview, so what you see is the browser’s own layout engine at work. The CSS for the container and its children is generated from the same values.
Changing flex-direction swaps which axis justify-content and align-items control, which is the part of flexbox most worth seeing rather than reading about.
When to use it
- Learning how justify-content and align-items interact by toggling them.
- Building a navigation bar or toolbar layout and copying the CSS.
- Working out why items shrink instead of wrapping.
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.