CSS Flexbox Generator

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to align and distribute space among items in a container, even when their sizes are unknown.

justify-content controls how items are distributed along the main axis (horizontally in a row, vertically in a column).

align-items controls how items are aligned along the cross axis (perpendicular to the main axis).

Use wrap when you want items to wrap to a new line when there isn't enough space, rather than overflowing or shrinking.

The gap property sets spacing between flex items without adding margin to the outer edges of the container.