About the CSS Flexbox Generator
What is a flexbox generator?
Flexbox lays out a set of items along one axis and decides how the space left over gets shared. That's the whole idea, and it's why it handles navigation bars, toolbars, card rows and centering so well. The awkward part is that a dozen properties are involved, half of them live on the container and half on the items, and several of them change meaning depending on whether the direction is row or column.
A generator lets you set each one and see the result immediately, rather than reading a property list and trying to picture it. Every change updates both the preview and the code, and the code is the same thing you would write by hand.
Two extras here are worth knowing about. There's a slider that narrows the preview container, which matters because most of flexbox only becomes visible when space runs short. Shrink, wrap and basis do nothing at all until the container is too small, and no other generator lets you squeeze it. Under the preview there's also a sentence describing the current settings in plain words, which is the quickest way to check that align-items is doing what you think it is once the direction is set to column.
How to Use This Tool
- Start from a pattern. Navbar, cards that wrap, sidebar and content, and the toolbar with a spacer cover most of what flexbox gets used for.
- Set the container. Direction, wrapping, spacing along the line and alignment across it. The sentence under the preview restates your choices so there's no guessing.
- Tune each item. Grow shares out spare space, shrink decides who gives ground when there isn't enough, and basis is where an item starts from. Order and align-self let one item break the pattern.
- Squeeze the container. Drag the width slider down and watch what happens. This is where wrap and shrink finally show themselves.
- Copy both halves. The CSS box has the container and the item rules, and the HTML box has markup with matching class names.
Common Use Cases
Flexbox is the right tool when you care about one direction at a time. If you need columns and rows to line up together, grid is the shorter answer.
- Navigation bars: a logo on the left, links in the middle, a button on the right, all vertically centered with two properties.
- Toolbars with a gap in the middle: give one empty item
flex-grow: 1 and it pushes everything after it to the far end.
- Card rows:
flex: 1 1 220px with wrapping gives you cards that fill the row and drop to the next line when they get too tight.
- Media objects: an avatar that keeps its size next to a body that takes the rest, the classic comment or notification row.
- Sticky footers: a column with the main region set to grow keeps the footer at the bottom on short pages without any positioning tricks.
- Centering: two lines and anything sits dead center, which was genuinely hard before flexbox existed.
Building in two directions? The CSS Grid Generator handles rows and columns together with named areas. For the items themselves, the CSS Button Generator and the CSS Box Shadow Generator take it from there. Or browse all our free developer tools.
Frequently Asked Questions
What do the three numbers in flex mean?
They're grow, shrink and basis, in that order. Basis is the size an item wants to be before any sharing happens. Grow is its share of any space left over, and shrink is its share of the shortfall when there isn't enough. flex: 1 1 0% means every item starts at nothing and then splits the container equally, which is how you get columns of the same width. flex: 1 1 auto starts each item at its content size and shares the remainder, so wider content stays wider.
Why won't my flex item shrink?
Because a flex item's automatic minimum size is the size of its content, and shrink stops there. A long unbroken string, a wide image or a table will hold the item open no matter what you set. Add min-width: 0 to the item, and often overflow: hidden too, and it will collapse the way you expected. In a column layout the same thing happens with min-height: 0.
Why does align-content do nothing?
Because it positions lines, and with flex-wrap: nowrap there's only ever one line. Set wrapping to wrap and it comes alive. This trips up a lot of people, since align-items and align-content sound like they should be related and their effects look similar in screenshots.
Should I use gap or margins?
Gap, in anything you're writing now. It only puts space between items rather than around them, so there's no leftover margin on the last one and no negative margin on the container to cancel it out. Every browser has supported gap in flexbox since 2021. Margins still have their place for pushing a single item away from the rest, and margin-left: auto on one item is a neat alternative to the spacer trick.
Is order safe to use?
Use it carefully. It changes the painted order but not the DOM order, so keyboard focus and screen readers still follow the source. A visual sequence that disagrees with the tab sequence is genuinely disorienting, and it's a documented accessibility failure. Reordering one item on a small screen is usually fine. Rearranging a whole row is a sign the markup should change instead.
Flexbox or grid?
Flexbox for a single row or column of items that size themselves from their content. Grid when you're placing things into a structure you've defined in advance, in two directions. They work together, and a grid item can be a flex container. The practical test is whether you're describing the items or describing the layout. If you find yourself counting rows and columns, that's grid.
Do I still need vendor prefixes?
No. The old display: -webkit-box and -ms-flexbox spellings belong to a version of the spec that died a decade ago, and every browser has shipped the standard syntax since. Autoprefixer will still add them if your build asks for ancient targets, which is worth checking, because the old syntax behaves differently and can make a layout worse rather than better.
