CSS Flexbox Generator
Change the container properties and watch the items rearrange, then copy the CSS.
About the CSS Flexbox Generator
This Flexbox generator is a playground for learning and building CSS flexible layouts. Change flex-direction, wrapping, gap, justify-content, align-items and align-content and watch a live preview of numbered items rearrange, then copy the CSS for your container.
Flexbox arranges children along a main axis and a cross axis. flex-direction sets the main axis (row or column, optionally reversed). justify-content distributes items along the main axis, while align-items aligns them on the cross axis. align-content only matters when flex-wrap lets items form multiple lines. The gap property adds consistent spacing between items without margin hacks.
How to use it
- Choose flex-direction and flex-wrap.
- Set justify-content and align-items to position items.
- Change the number of items and the gap to match your layout.
- Copy the CSS and add it to your container rule.
Tips and good to know
- If justify-content seems to do nothing, check that the container has extra space along the main axis.
- For perfect centring, use justify-content: center and align-items: center.
- Use column direction for vertical stacks and mobile layouts.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content works along the main axis; align-items works across it.
When should I use grid instead?
Grid is better for two-dimensional layouts with rows and columns; flexbox suits one-dimensional rows or columns.
Why does align-content have no effect?
It needs flex-wrap set to wrap and more than one line of items.