Learn and build CSS flexbox layouts visually. Set direction, alignment, wrapping and gaps on live items and copy the CSS. Free flexbox generator.
About this tool
Explore flex direction, alignment, wrapping and gaps with a live set of items.
How to use CSS Flexbox Generator
- Choose flex-direction, justify-content, align-items and flex-wrap.
- Adjust gap and Items, and enable Varied item sizes to stress-test alignment.
- Copy the CSS and apply it to the parent container of your actual items.
Worked example
Use a row with space-between to distribute navigation items across a container.
Are justify-content and align-items interchangeable?
No. They act on different axes, and changing direction changes which axis is primary.
Will this cover every responsive layout?
No. Test real content widths and add media queries where your design needs different behavior.
Explore CSS Tools · More practical guides