gizmobench

Flexbox Generator

Choose the direction, wrap, justify-content, align-items, align-content and gaps, give any item its own flex-grow, flex-shrink, flex-basis and align-self, and the boxes above the code are the layout itself rather than a picture of one: the preview is rendered from the same declaration list that gets written into the CSS, so the rule you copy is the arrangement you were looking at. Three things separate it from the generators that hold this search. The first is that the CSS comes with the HTML it is keyed to, one class per item in the same order, so pasting both reproduces the layout instead of leaving you a container rule with nothing in it. The second is that the axis labels under the preview change with the direction: switch to column and the main axis becomes vertical, so it is clear which property moves things which way, and wrap-reverse is shown flipping the cross axis. The third is that a setting which is legal but inert gets named: align-content on a container that cannot wrap, a growing item leaving justify-content nothing to distribute, or a row that will overflow because nothing may shrink. The rule can be written short, with only the properties that differ from the CSS default, or in full with every property listed, and both lay out identically because what the short form leaves out is the value the browser already uses.

preview5 items
1
2
3
4
5

main axis horizontal, left to rightcross axis vertical, top to bottom

cssonly what differs from the default
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

A flex container holding 5 items along a horizontal main axis running left to right, wrapping onto new lines. justify-content: space-between spaces them along that axis, align-items: center places them across the vertical cross axis running top to bottom, and there is a gap of 8px. The CSS beside it is the declaration list this preview is drawn from.

Item 1
Item 2
Item 3
Item 4
Item 5
5 of 12 items. Every item keeps its own grow, shrink, basis and align-self.
  • Row, space-betweenEven gaps with the first and last item flush to the ends
    5 items, horizontal main axis, justify space-between, align center
  • Column, centredStacked down the box and centred across it
    5 items, vertical main axis, justify center, align center
  • No wrap, items shrinkA narrow box where flex-shrink does the work instead of wrapping
    4 items, horizontal main axis, justify flex-start, align stretch
  • One item growsA sidebar at a fixed basis beside a main column that takes the rest
    2 items, horizontal main axis, justify flex-start, align stretch

Short writes only the properties that differ from the CSS default; Every property writes all of them. The two lay out identically, because what Short leaves out is the value the browser already uses. The class names in the CSS are the ones in the HTML, so the two paste together. Up to 12 items, and the settings stay in this browser alone: Start over, above the tool, forgets them.

Accuracy. The CSS shown is exactly what the preview applies, so what you copy is what you saw. It covers the flex container and item properties only. The box around the preview has the width you set, a height and a dashed edge, and each item carries a tint, some padding and its number so you can tell them apart on the dark background. None of those are flex properties and none are written into .flex-container or the rules beside it.

Common questions

How do I centre something with flexbox?
Set justify-content to center, which moves items along the main axis, and align-items to center, which moves them across the cross axis. With flex-direction: row that is horizontal then vertical; with column it is the other way round, and the axis labels under the preview say which is which as you change it. The centring across the cross axis only shows when the container is taller than its items, which is why the preview box has a height of its own. That height is not a flex property and is not written into the copied rule.
What is the difference between justify-content and align-items?
justify-content works along the main axis, the one flex-direction sets, and align-items works across the cross axis, the perpendicular one. A row has a horizontal main axis and a vertical cross axis; a column swaps them. The two lines under the preview name both axes and their direction, including the reversal that row-reverse, column-reverse and wrap-reverse cause, so the properties can be matched to what actually moves.
Why is align-content doing nothing?
Because align-content distributes the lines of a wrapped container, and a container with flex-wrap: nowrap only ever has one line. The tool says so rather than leaving you to guess: set wrap to nowrap with an align-content other than stretch and a line appears under the layout naming the setting and why it has no effect. Two other inert combinations are reported the same way, a growing item that leaves justify-content nothing to distribute, and items that can neither wrap nor shrink.
Why does my row overflow instead of shrinking?
Items shrink only when flex-shrink is above 0, and they move to a new line only when flex-wrap allows it. With flex-wrap: nowrap and flex-shrink: 0 on every item there is nothing left for the browser to do, so the items run past the edge of the container. Set a preview width narrower than the items to watch it happen, and the tool names that combination underneath. Raising flex-shrink to 1 or setting wrap to wrap fixes it.
What do flex-grow, flex-shrink and flex-basis mean?
flex-basis is the size an item starts at along the main axis, flex-grow is its share of any space left over, and flex-shrink is its share of the shortfall when there is not enough room. Each item here has its own three fields plus align-self, which overrides align-items for that one item. The tool writes the three as separate longhand declarations rather than the flex shorthand, because the shorthand changes flex-basis to 0% in a way that surprises people, and a written flex-basis says exactly what it is.
What is the difference between the short rule and every property?
Short writes display: flex plus only the properties whose value differs from the CSS default, so an untouched align-content or a default flex-direction is left out; an item left entirely at its defaults gets no rule at all, only a class. Every property writes all of them. The two lay out identically, because the declarations the short form omits are exactly the values the browser already applies, and the preview is drawn from whichever list is on screen.
Does the copied CSS include the preview's own styling?
No. Only flex container and flex item properties are ever written: display, flex-direction, flex-wrap, justify-content, align-items, align-content, gap, and per item flex-grow, flex-shrink, flex-basis and align-self. The width you set on the preview box, its height, its dashed edge, and the tint, padding and number on each item exist so the layout is visible on a dark background, and none of them reach the rule.
What values will it accept, and how many items?
Gaps and the preview width take 0 or a number with px, rem, em or %. flex-basis takes those plus auto and content. flex-grow and flex-shrink take a number from 0 up to 1000. Anything else is refused by name and position, so Item 2 has a flex-basis of "160" tells you which field to fix instead of writing a rule that silently does nothing. Up to 12 items, which is where the preview stops being readable.
Is anything uploaded?
No. The layout is built in your browser, so nothing is sent anywhere and there is no account. The container settings, the per-item settings and the preview width are remembered in this browser alone so they are still there when you come back, and the Start over button above the tool forgets them.

The CSS shown is exactly what the preview applies, so what you copy is what you saw. It covers the flex container and item properties only.