↔
CSS Flexbox generator
Test direction, alignment, distribution, wrap and gap with a Flexbox preview.
1
2
3
4
5
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;How it works
Select the main Flexbox properties. The example container is updated immediately and the CSS code is ready to copy.
Frequently asked questions
What properties can I set?
Includes flex-direction, justify-content, align-items, flex-wrap and gap.
Does it help to learn Flexbox?
Yes. The preview allows you to observe how the distribution changes when changing each property.