Adjust the container and per-item flex properties, watch the live preview update, and copy the generated CSS. Click any item in the preview to edit its individual properties (flex-grow, flex-shrink, flex-basis, align-self, order). Everything runs in your browser.
Container
Main axis direction the items flow along.
Whether items wrap onto multiple lines.
Alignment along the main axis.
Alignment along the cross axis (per line).
Spacing between lines when items wrap (needs flex-wrap: wrap).
Space between items.
Items
Click an item in the preview to select it.
How much the item grows to fill free space.
How much the item shrinks when space is tight.
Starting size before grow/shrink (for example auto, 100px, 20%).