Live Preview
See items rearrange the instant you change a property, so flexbox finally makes sense.
Flexbox Generator
Build a CSS flexbox layout visually and copy the code. Change direction, alignment, wrapping, and gap, add or remove items, and watch the preview rearrange. Free, no signup.
Guide
How to use the flexbox generator
1
Set The Container
Choose flex-direction, justify-content, align-items, and wrap from the menus.
2
Adjust Items And Gap
Add or remove items and drag the gap slider. The preview rearranges live.
3
Copy The CSS
Copy the container CSS and paste it onto your own flex container.
Learn Flexbox by Seeing It
Flexbox is the modern way to lay out a row or column of elements, but the property names are easy to mix up. Does justify-content run along the main axis or the cross axis? What does align-items actually do here? Reading about it only goes so far. Watching boxes move as you flip each setting is what makes it click.
This generator gives you a live container with sample items and a control for every flex property. Switch the direction, change how items are justified and aligned, turn wrapping on, and set the gap. The boxes rearrange instantly, and the matching CSS is written for you.
When the layout is right, copy the container CSS and apply it to your own element. It is great for navbars, card rows, button groups, and centering. Everything runs in your browser, so nothing is sent anywhere.
Benefits
Why Use Our Flexbox Generator?
Every Property
Control flex-direction, justify-content, align-items, flex-wrap, and gap in one place.
Add Or Remove Items
Change the number of items to test how your layout behaves with more or fewer boxes.
Gap Control
Drag a slider to set the spacing between items and read the exact pixel value.
Copy Clean CSS
Get ready to paste container CSS, correctly formatted, that works everywhere.
In Your Browser
Everything runs on your device. Nothing is uploaded and there is no signup.
Explore More
Similar Tools
More Developer tools you might find useful.
FAQ
Frequently Asked Questions
Common questions about CSS flexbox.
What is the difference between justify-content and align-items?
Justify-content positions items along the main axis, the direction set by flex-direction. Align-items positions them along the cross axis, which is perpendicular. In a row, justify-content moves items left to right and align-items moves them top to bottom.
How do I center something with flexbox?
Set the container to display flex, then justify-content center and align-items center. That centers a child both horizontally and vertically. This tool lets you pick those values and see the result before you copy the CSS.
What does flex-wrap do?
By default flex items stay on one line and can shrink to fit. Setting flex-wrap to wrap lets them flow onto new lines when there is not enough room, which is useful for responsive card grids.
How does gap work in flexbox?
The gap property adds consistent spacing between flex items without adding margins to each one. It is simpler than margins because it does not add space on the outer edges of the container.
Does this tool send my data anywhere?
No. The layout and CSS are generated entirely in your browser. Nothing is uploaded, logged, or stored.
Is the flexbox generator free?
Yes, it is completely free with no limits and no signup.