Flexbox is a CSS layout model that distributes space along a single axis, making it easy to align and distribute items in a container.

Can I adjust the gap between items?

Yes, use the Gap slider to control spacing between flex items.

How do I copy the CSS?

Click the Copy CSS button to get the flex container CSS code ready to paste.

Tools

Visualize flexbox properties and copy the CSS code

justify-content: center

align-items: center

flex-direction: row

gap12px

flex-wrap: wrap

Items6

CSS Output

display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 12px;