Loading page
About this tool
Configure CSS Flexbox layouts visually. Custom item numbers, container properties, alignment configurations, and responsive code outputs.
The CSS Flexbox Generator is a visual editor that builds a working flex layout from the six container properties — flex-direction, flex-wrap, justify-content, align-items, align-content and gap — and emits the matching CSS. You add up to 10 flex items, tune flex-grow, flex-shrink, flex-basis, align-self and order on any one of them, and watch the preview rearrange as you change each value. When the layout looks right you copy the rule set or download it as flexbox-layout.css.
Open CSS Flexbox Generator on AltFTool — it loads instantly in your browser.
Set the Flex Container Properties — flex-direction, flex-wrap, justify-content, align-items, align-content — and the Gap spacing slider, which runs up to 40px.
Press Add Block to add blocks (up to 10), select one, and set its flex-grow, flex-shrink, flex-basis, align-self and order overrides.
Check the Flex Container Visualizer, then press Copy in the Generated Stylesheet panel or Download to save flexbox-layout.css.
Six container properties and five per-item properties are editable together, so you can see how flex-grow interacts with justify-content instead of guessing.
An item rule is written out only when its grow, shrink, basis, align-self or order differs from the default, so the output has no dead declarations to strip.
The on-screen boxes are laid out by the same property values that get written into the file, so what you approve visually is what you paste.
align-items positions items along the cross axis within a single line, while align-content distributes the lines themselves and only has a visible effect when the container has more than one line. That means align-content does nothing unless flex-wrap is set to wrap or wrap-reverse and the items actually overflow onto a second row.
flex-basis: auto tells the item to start from its own width or height (or its content size if no dimension is set) before any growing or shrinking is applied. Set an explicit value like 200px or 0 when you want every item to start from the same baseline, which is what makes flex-grow split space evenly.
You can add up to 10 items to the container, and remove any of them down to a minimum of one. That is enough to reproduce most real layouts — nav bars, card grids, toolbars — while keeping the preview readable.
The gap control here is a pixel slider running from 0 to 40px, so the generated rule is always gap: Npx. If you need rem, em or a percentage, copy the CSS and swap the unit by hand; the gap property accepts any length value in browsers.