CSS Flexbox Generator

CSS

Build a display: flex container rule visually. Adjust direction, alignment, wrapping, and gap, watch the preview update live, then copy the generated CSS.

Private by architecture: All processing is 100% client-side memory. Your data never leaves this browser tab.

Container Properties

flex-direction

justify-content

align-items

flex-wrap

gap

Child boxes

Live Preview Stage

Interactive

Generated CSS

Children need no extra CSS for this layout. Add flex-grow or flex-basis on an individual child only if you want it to size differently.

About This Tool

Flexbox container rules are five properties working together: flex-direction, justify-content, align-items, flex-wrap, and gap. This tool renders a live set of numbered boxes that update instantly as each property changes, so you can see exactly how the axis, alignment, and spacing interact before copying the CSS into your project.

It deliberately focuses on the container rule. Flex-item properties (flex-grow, flex-shrink, flex-basis, order, align-self) apply per-child and can be added to individual children as needed.

Key Features

Interactive preview: 2 to 8 colored child boxes re-render instantly on every configuration change.
All five core properties: Full control over direction, justify-content, align-items, flex-wrap, and gap.
Free-form gap units: Supports any valid CSS length unit including px, rem, em, %, or calc().
Copy-ready CSS rule: One-click copy provides clean, formatted .container selector CSS.
Zero dependencies: 100% native client-side rendering with instant responsiveness.

Frequently Asked Questions

Does this generator set CSS on the flex children too?

No: by design it only emits the container rule (display, flex-direction, justify-content, align-items, flex-wrap, gap). Per-item properties like flex-grow, flex-shrink, flex-basis, order, and align-self are tuned individually on specific children.

Why do my boxes not wrap even though I set flex-wrap: wrap?

wrap only takes effect once the combined width (or height, in column mode) of the children exceeds the container. Add more boxes, widen the gap, or shrink the preview pane to see it kick in.

What is the difference between justify-content and align-items?

justify-content positions items along the main axis (the flex-direction), align-items positions them along the cross axis (perpendicular to it). In row mode, justify-content is horizontal and align-items is vertical; in column mode it is reversed.

Why does align-items: baseline look identical to flex-start sometimes?

baseline aligns items by their text baseline, not their box edge. With no text content or uniform-height boxes there is nothing to visually distinguish it from flex-start: it matters once children have different font sizes or padding.