CSS Flexbox Generator
Every flex property, live. Copy the CSS or the Tailwind classes.
Click an item to set its flex-grow, flex-shrink, flex-basis, align-self and order.
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;
}
Flexbox, without guessing which axis you're on
Flexbox has eleven properties worth knowing and two of them swap meaning when you change a third. This lays all of them out at once, on a preview with uneven item heights so alignment is actually visible, and writes both the CSS and the Tailwind utilities as you go.
How to use it
-
Set the container
Pick a flex-direction and wrap mode, then choose how the items are distributed along the main axis (justify-content) and the cross axis (align-items).
-
Add or remove items
Use the plus and minus controls. Items are given uneven heights on purpose, so align-items visibly does something.
-
Tune an individual item
Click any item in the preview to set its flex-grow, flex-shrink, flex-basis, align-self and order.
-
Copy the code
Take the CSS, or switch to the Tailwind tab for the equivalent utility classes. Only the properties you actually changed are written out.
Main axis and cross axis
Almost every flexbox mistake comes from the same place: justify-content and
align-items do not have fixed directions. They follow the main and
cross axes, and flex-direction decides which is which. In a row the main
axis runs horizontally; switch to column and it runs vertically, taking
justify-content with it. Toggle the direction control above and watch both change
at once — it is much faster than reading about it.
The flex shorthand
flex packs three properties into one: grow, shrink and basis. The three values
you will actually use are flex: 1 for equal-width items that ignore their
content, flex: auto for items that grow but keep their content proportions, and
flex: none for items that refuse to resize at all. Everything else is a
variation on those.
When to reach for Grid instead
Flexbox distributes along one axis. The moment you need things to line up in both directions at once — a page skeleton, a dashboard, a card grid where rows must align — you want CSS Grid, and probably the grid cheat sheet beside it.
Frequently asked questions
Why is my flexbox not working?
display: flex is on the wrong element. It goes on the parent, and it only affects that parent's direct children — not grandchildren. The other common causes are a typo in the value, or the flex properties being set on the child instead of the container.How do I center a div with flexbox?
display: flex; justify-content: center; align-items: center on the parent. That centres horizontally and vertically at once. For full-screen centring the parent also needs a height — min-height: 100dvh is the usual choice.What is the difference between justify-content and align-items?
justify-content works on the main axis and align-items on the cross axis. Which is which depends on flex-direction: in a row the main axis is horizontal, in a column it is vertical — so switching direction swaps what the two properties visually control.What does flex: 1 mean?
flex: 1 is shorthand for flex: 1 1 0% — grow, shrink, and start from zero width. Because every item starts at zero, they end up equal regardless of content. flex: auto starts from the content size instead, so items with more content stay wider.Why is align-content doing nothing?
flex-wrap: nowrap means there is exactly one. Enable wrapping and it takes effect.Why does my flex item overflow its container?
min-width: auto, which refuses to shrink below the content's intrinsic size. A long unbroken string or wide image will push straight out. Set min-width: 0 on the item.Is flexbox still used?
Does the order property change tab order?
order moves an item visually but keyboard focus and screen readers follow the DOM, so an item moved to the front with order: -1 is still focused last. Reorder the HTML if the sequence matters.