Processing and privacy
Processing varies by tool. Check the instructions for local processing, server requests, external services and any file or request limits before entering sensitive information.
Read the privacy policyShare this tool
Found it useful? Send it to a friend or teammate.
Rate this tool
5.0
1 rating
- 5 stars 1
- 4 stars 0
- 3 stars 0
- 2 stars 0
- 1 star 0
Clear instructions
Find steps, examples and limitations below.
Use online
Open the tool in a supported web browser.
Free to use
No sign-up required. Tool-specific limits may apply.
How to use the CSS Flexbox Generator
Explore flex direction, alignment, wrapping and gaps with a live set of items.
- 1 Choose flex-direction, justify-content, align-items and flex-wrap.
- 2 Adjust gap and Items, and enable Varied item sizes to stress-test alignment.
- 3 Copy the CSS and apply it to the parent container of your actual items.
Example and practical tips
Use a row with space-between to distribute navigation items across a container.
Frequently asked questions
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.
Practical guides
-
How to Use CSS Flexbox Generator
Learn and build CSS flexbox layouts visually. Set direction, alignment, wrapping and gaps on live items and copy the CSS. Free flexbox generator.
Report an issue
Something broken or not quite right? Tell us and we will look into it.