Flexbox Generator

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

Settings

Preview

Code


            
            
            

User guide

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

  • space-between distributes space between items.
  • gap nicely replaces margins between items.

FAQ

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.