CSS Flexbox Generator

Change flex-direction, justify-content, align-items, wrap and gap, add or remove items, and watch the row rearrange. Copy the flex container CSS when it lines up.

This flexbox generator lets you feel out how the flex properties push items around before you write any CSS. Switch flex-direction, justify-content, align-items and flex-wrap, change the gap, and add or drop items to see how the row or column responds. It works as a flex layout maker and a css flexbox playground in one: every control updates the live preview and the container CSS at the same time. Copy the rule once the alignment matches what you had in mind.

1
2
3
4
5
CSS
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 12px;

How it works

  1. 1

    Pick a direction

    Choose row or column (and their reverse variants) to set the main axis your items flow along.

  2. 2

    Align and space the items

    Use justify-content and align-items to position items on both axes, then set the gap and wrap in this flexbox tool.

  3. 3

    Copy the container CSS

    Grab the display:flex rule and apply it to your parent element. The item styles stay yours to set.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

What is the difference between justify-content and align-items?
justify-content spaces items along the main axis that flex-direction sets, while align-items positions them on the cross axis. Switching direction to column flips which one feels horizontal.
When should I use flexbox instead of grid?
Flexbox suits laying out items in a single row or column and distributing space between them. Grid is stronger for two-dimensional layouts with defined rows and columns.
What does flex-wrap do?
With nowrap, items shrink to stay on one line. With wrap, items that do not fit move to the next line, which the preview shows once you add enough items.
Why does align-items: stretch make items fill the height?
Stretch is the default: items with no fixed cross-axis size grow to fill the container. Set a height on an item or switch to center to stop it.
Does the gap property need a fallback?
gap in flexbox is supported in all current browsers. Only very old ones need margins as a fallback, so for a modern audience gap is the cleaner choice.

More tools

JSON Formatter & ValidatorBeautify, minify, validate JSON with a collapsible tree view.Code Formatter & MinifierPretty-print or minify JS, TS, CSS, HTML, JSON, SQL and more.YAML ⇄ JSON ⇄ TOML ConverterConvert config between YAML, JSON and TOML, both ways.JSON Schema Viewer & ValidatorRender a JSON Schema as a tree and validate data against it.Markdown Editor (Live Preview)Write Markdown with a live, side-by-side HTML preview.Mermaid Live EditorTurn Mermaid text into flowcharts and diagrams, live.

More from the Hivly network

Free sister tools on our other sites.

Color Palette GeneratorShuffle palettes with the spacebar, lock favourites, copy hex codes.Length ConverterMetres, feet, miles, inches, km and more, instantly.Word CounterCount words, characters, sentences and reading time live.