CSS Flexbox Generator
Design a flex container visually and copy the CSS — direction, alignment, wrapping and gap with a live preview.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}Tip: items have different heights on purpose so you can see align-items and baseline effects clearly. Switch direction to column to see justify/align swap axes.
Frequently Asked Questions
What does justify-content vs align-items do?
justify-content distributes items along the main axis (the flex-direction), while align-items positions them on the cross axis. Switch direction to column and the two swap visual roles — the playground makes this obvious instantly.
Why do the preview boxes have different heights?
Deliberately: equal boxes hide alignment behaviour. Mixed heights let you see flex-start, center, baseline and stretch actually doing something, which is the fastest way to build intuition.
How do I use the generated CSS?
Copy it onto your container element and make sure the items are direct children of that container. Flexbox only affects direct children — grandchildren need their own flex container.
What is the difference between space-between, space-around and space-evenly?
space-between puts free space only between items; space-around gives each item equal space on both sides (so edges get half); space-evenly makes every gap, including the edges, exactly equal.
Related Tools
CSS Gradient Generator
Build linear or radial gradients with colour stops and copy the CSS instantly.
Border Radius Generator
Set each corner radius with sliders — including fancy blob shapes — and copy the CSS.
Box Shadow Generator
Tweak shadow offset, blur, spread, colour and opacity with a live preview box.