Visualize flex container properties in real-time. Adjust settings and copy the generated CSS.
flex-direction — Defines the main axis: row (horizontal) or column (vertical).
justify-content — Aligns items along the main axis: center, space-between, space-around.
align-items — Aligns items along the cross axis: center, stretch, flex-start.
flex-wrap — Controls whether items wrap to new lines: nowrap (default) or wrap.
align-content — Aligns wrapped lines (only works with flex-wrap: wrap).
gap — Sets spacing between items without using margins.