CSS Flexbox Generator
Lay out a flex container with real items to watch, and copy only the properties that differ from the browser's defaults.
Enable JavaScript to change the layout; the CSS below is for the defaults.
Row lays the items along the inline axis, which follows the text direction.
Along the main axis, whichever axis the direction made that.
Across the main axis. stretch is the default and the reason items match heights.
nowrap is the default, and the usual reason items squash instead of moving to a new line.
Only does anything once the lines wrap, so it is left out of the CSS until they do.
Gap replaced the margin tricks. It applies between items, never outside them.
Left empty it matches the gap above. A number here writes the two values separately.
How much of the leftover space each item takes. 0 means none.
1 is the default, and why items shrink below their content width.
The starting size before growing or shrinking. auto means the content's own size.
Uneven heights are what make align-items visible at all.
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}Lay out a flex container against real items, and copy only the properties that are actually doing something.
How to use
- Set the direction first. It decides which axis is the main one, and every other property is described in terms of that.
- Set justify content for the main axis and align items for the cross axis. The uneven item heights in the preview are what make align items visible.
- Turn wrapping on if the items should move to a new line rather than squash. Align content appears in the CSS only once they can.
- Use gap rather than margins. It applies between items and never outside them, which is what the old negative-margin tricks were working around.
- Copy the CSS. Anything left at the browser’s own default is left out, because writing
flex-wrap: nowrapteaches that you need it.
Example
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}Four declarations, three of them doing work. flex-direction: row is absent because that is already what flex does.
Pitfalls
nowrapis the default. Items squashing below their content width instead of moving to a new line is almost always this, plusflex-shrink: 1, which is also a default.flex: 1is notflex-grow: 1. The shorthand sets basis to0%, so items ignore their content width;flex: 1 1 autokeeps it. That difference is the single most common flexbox surprise.- A flex item cannot shrink below its content’s minimum size unless you say so.
min-width: 0on the item is the fix for a long word or apreblock blowing out a row. align-contentdoes nothing on a single line. If it appears to be ignored, wrapping is off.align-items: stretchis why two cards in a row match heights, and why an image in a flex row can look distorted.align-items: flex-startstops both.gapon flex is supported in every current browser, but Safari only added it in 14.1. If you support older Safari, the fallback is margins on the items and a negative margin on the container.- Percentage
flex-basisresolves against the container’s main size, which is undefined in someheight: autocolumns. It silently behaves likeautothere. - Flexbox is one-dimensional. If you are fighting to align things in rows and columns, that is grid’s job.
Compatibility
Flexbox is supported unprefixed by every browser in use, since 2015. gap in flex containers needs Chrome 84, Firefox 63 or Safari 14.1; everything else here is older than that. The generated CSS uses no prefixes, because the prefixed syntax targets a version of the specification that no shipping browser uses any more. The tool runs entirely in your browser.
Frequently asked questions
Why are my items not wrapping?
flex-wrap: nowrap is the default. Set it to wrap.What is the difference between justify and align?
Should I use flexbox or grid?
Why is one item wider than the rest?
flex-grow is on and it has more space to take.How do I make equal width columns?
flex: 1 1 0% on every item, which ignores content width. With auto instead of 0% the widths follow the content.