Flexbox Generator

Master Flexbox visually: tweak direction, alignment, wrapping and spacing, and watch the layout update live.

Settings

flex-direction

justify-content

align-items

flex-wrap

gap 12px

Number of items 4

Flexbox aligns items along an axis. justify-content works on the main axis (set by flex-direction) and align-items on the cross axis.

justify-content vs align-items?

justify-content distributes space along the main axis; align-items aligns items on the perpendicular axis.

Does gap work with Flexbox?

Yes, the gap property is now supported by all modern browsers in Flexbox.