CSS Flexbox Generator
Note: flex: 1 is shorthand for 1 1 0%, which zeroes the basis and makes every item equal regardless of its content. flex: auto keeps the content width and shares only the leftover. Switch between them above to see the difference.
The flex shorthand is where the real behaviour is, and its three parts are read in an order that surprises people. flex: 1 does not mean grow by one — it expands to flex: 1 1 0%, which sets the basis to zero and makes every item share the space equally regardless of content. flex: auto is 1 1 auto, where items keep their content width and share only the leftover. Those two produce visibly different layouts from the same markup, and picking the wrong one is behind most cases of one item mysteriously wider than the rest.
Shrinking is on by default, and it is the reason a flex item can end up narrower than its own content. Because flex-shrink defaults to 1, a row of items squeezed into a tight container will all give way. Setting flex-shrink: 0 on the one that must not — an icon, a fixed sidebar — is the usual fix.
One genuine gap: gap works in flexbox in every current browser, so the old margin-based spacing with a negative margin on the container is no longer needed. It is still the first thing many people reach for.
Frequently Asked Questions
What is the difference between flex: 1 and flex: auto?
flex: 1 expands to 1 1 0%, so the content width is ignored and every item ends up equal. flex: auto is 1 1 auto, so items keep their natural width and only share the leftover space. If one item is unexpectedly wider than its siblings, this is almost always why.
Why is my flex item narrower than its content?
Because flex-shrink defaults to 1, so items give way when space runs out. Set flex-shrink: 0 on anything that must keep its size — an icon, a label, a fixed sidebar. Setting min-width: 0 is the opposite fix, for an item refusing to shrink at all.
Should I use flexbox or grid?
Flexbox when content flows along one axis and the items' own sizes should decide the wrapping — a toolbar, a tag list, a row of buttons. Grid when you are placing things in two dimensions and the container should decide the structure. They compose well: a grid cell can perfectly reasonably be a flex container.
Does gap work in flexbox?
Yes, in every browser currently in use. The old pattern of negative margins on the container and positive margins on the children is no longer necessary, and gap does not have its awkward interaction with the first and last items.
Why does align-items: center not work?
Usually because the container has no height to centre within, so it is already exactly as tall as its tallest item. Give the container a height, or use min-height, and the alignment has room to do something.
