Flexbox Generator
Build CSS flexbox layouts visually with live code output.
Live preview
Generated CSS
Frequently Asked Questions
Why doesn't `align-content` seem to do anything in some layouts?
`align-content` only becomes visible when the flex container has multiple lines and extra cross-axis space. If everything fits on one line, changing it may appear to do nothing.
Can I preview column layouts, not just rows?
Yes. The direction controls include `column` and `column-reverse`, and the preview updates immediately when you switch modes.
Does the number of preview items matter?
Yes. The item count controls how likely the preview is to wrap, which is especially useful when testing `flex-wrap` and `align-content` behavior.
Can I set gap in rem or percent?
Not in this generator. Gap is driven by a slider and always emitted as a pixel value from 0 to 48.
What gets copied to the clipboard?
The tool copies a full snippet with a `.container` rule for the flex settings plus a small `.item` example block used by the preview.