CSS Flexbox Generator & Playground
Stop guessing which flexbox property does what. Change direction, wrapping, alignment and gap, watch the boxes move, and copy the CSS.
How to use the flexbox generator
- Change the container properties and watch the preview update.
- Add or remove items and toggle growing to see how space is shared.
- Copy the CSS for your container (and items, if growing).
Flexbox in a nutshell
Flexbox lays items out along one axis. flex-direction sets the main axis (row or column). justify-content distributes items along that main axis, align-items aligns them across it, and gap adds consistent space between them without margins.
With flex-wrap: wrap, items move onto new lines when they run out of room, and align-content controls how those lines are spaced. flex: 1 on items makes them grow to share the leftover space equally.
Use flexbox for one-dimensional layouts such as navigation bars, toolbars, card rows and centering. For two-dimensional page layouts with rows and columns, CSS Grid is usually simpler.
Need a different tool? Suggest it here — we read every message.
Frequently asked questions
How do I center something with flexbox?
On the parent: display: flex; justify-content: center; align-items: center;
What is the difference between justify-content and align-items?
justify-content works along the main axis (set by flex-direction); align-items works on the cross axis.
Why is align-content not doing anything?
It only affects multi-line flex containers, so it needs flex-wrap: wrap and enough items to wrap.
Should I use flexbox or grid?
Flexbox for one direction (a row or a column); Grid for rows and columns together.