Runs locally
Flexbox Playground
Direction, wrap, alignment and gap.
1
2
3
4
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
Export and import are available after you sign in. Sign in
The boxes on the page follow the CSS shown beside them.
About this tool
A quick, visual reminder of a common flexbox layout. Boxes on the page follow the CSS shown beside them; change the gap and copy the rules into your project.
How to use it
- 01
Set the gap between items.
- 02
Watch the boxes rearrange.
- 03
Copy the flexbox CSS.
FAQ
Frequently asked questions
Which flex properties are used?
display: flex with row direction, wrapping, justify-content: space-between, align-items: center and the gap you set.
When should I use grid instead?
Use flexbox for one-dimensional rows or columns, and CSS grid when you need rows and columns together.