design
Free
No signup
CSS Flexbox Generator
Visually configure Flexbox properties and get the generated CSS instantly.
Loading tool…
About this tool
Adjust every Flexbox container property — flex-direction, flex-wrap, justify-content, align-items, align-content, and gap — and see a live preview of 5 colored boxes respond in real time. Click any individual box to tune its own flex-grow, flex-shrink, flex-basis, align-self, and order, then copy the finished CSS with one click.
How to use
- 1 Step 1: Use the Container panel on the left to set direction, wrapping, and alignment properties.
- 2 Step 2: Watch the colored boxes in the preview update live as you change each property.
- 3 Step 3: Click any individual box to select it and adjust its own flex properties in the Item panel.
- 4 Step 4: Copy the generated CSS for the container, the selected item, or all items at once.