Visually build flexbox layouts and copy the CSS.
Tip: use samples, upload, copy, download, and send-to actions inside the workspace where available.
Flexbox Generator is a free, browser-based tool that helps you produce ready-to-use output in seconds. Visually build flexbox layouts and copy the CSS. It's built for speed and privacy: Everything runs locally in your browser — your data is never uploaded to a server. No sign-up, no installs, and no daily limits.
Generate a sample or helper artifact, then copy it into the workflow that needs it.
Review the preview, copy or download the result, and keep everything local in your browser.
CSS Grid Generator: Build CSS grid layouts with columns, rows, and gaps.
Open toolCSS Box Shadow Generator: Design CSS box-shadows visually and copy the code.
Open toolMain axis runs left to right, so justify-content moves items horizontally and align-items moves them vertically.
| Label | grow | shrink | basis | align-self | order | flex shorthand | Remove |
|---|---|---|---|---|---|---|---|
| initial | |||||||
| initial | |||||||
| initial | |||||||
| initial |
.flex-container {
display: flex;
gap: 12px;
}<div class="flex-container"> <div class="1"></div> <div class="2"></div> <div class="3"></div> <div class="4"></div> </div>
flex gap-3justify vs align depends on direction. They are not “horizontal” and “vertical” — justify works along the main axis and align across it. Switch to column and the two swap meaning, which is why a centring rule that worked suddenly does not.
flex: 1 is not flex-grow: 1. The shorthand expands to 1 1 0% — it resets basis to zero, so items size purely by their grow ratio. Writing only flex-grow: 1 leaves basis at auto, so content width still influences the result.
Items refuse to shrink below their content. The impliedmin-width: auto is why a long unbroken string overflows a flex row. Fix it with min-width: 0 on the item, not by adjusting shrink.
order and reverse directions only move things visually. Tab order and screen-reader order still follow the DOM, so a keyboard user gets a different sequence from a sighted one. Reorder the markup when the sequence carries meaning.
align-content needs multiple lines. With nowrap there is only ever one line, so the property has nothing to distribute and appears to do nothing at all.