CSS Flexbox Generator with Live Preview

What this flexbox generator does

CSS flexbox is the one-dimensional layout model that lets a container arrange its children along a row or a column. Pick a value for each core property — flex-direction to set the main axis, justify-content to distribute items along it, align-items to line them up across it, flex-wrap to allow or prevent wrapping, and a gap in pixels for the spacing between items. Turn wrapping on and align-content decides where the wrapped lines sit across the container. Set how many items the preview holds, then give any one of them its own order, flex-grow, flex-shrink, flex-basis and align-self. A live preview of numbered boxes reflows instantly with every change, so you can see exactly how each property behaves before you copy the code.

Copy-ready CSS output

The tool prints a ready-to-paste declaration block that starts with display: flex — or display: inline-flex when you pick that — and then lists your chosen flex-direction, justify-content, align-items, flex-wrap, then align-content when wrapping is on (on nowrap it does nothing, so it is left out), then gap. Under that comes one .item-N rule for every item you gave settings of its own, and nothing at all for the ones you left alone. Drop the block straight into a class in your stylesheet or an inline style attribute on the container element. The output is deterministic, so the same selections always produce exactly the same CSS — handy for learning how the properties combine and for grabbing a correct starting point for any layout.