CSS Flexbox Generator

Visually build flexbox layouts and copy the CSS.

Direction: rowJustify: flex-startAlign: stretchWrap: nowrapGap: 8px

Quick Presets

flex-direction

justify-content

align-items

flex-wrap

gap (8px)

Live Preview

CSS Output

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

Mastering flexbox layouts

Flexbox lays out items along a main axis set by flex-direction. justify-content distributes them along that axis, align-items positions them on the cross axis, and flex-wrap controls overflow onto new lines. Tweak the controls, watch the live boxes rearrange, and copy the CSS — generated entirely in your browser.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Building a row or column layout visually and copying the properties.
Getting the justify and align combination that matches a design.
Working out why an item is not shrinking as expected.
Producing a starting flex declaration you then refine.
Comparing wrap behaviour against a fixed-width alternative.

Frequently Asked Questions

Why does align-items: stretch look identical to flex-start?: Because the preview boxes have a fixed height, and stretch only affects an item with no cross-axis size of its own. baseline is likewise indistinguishable when every item holds the same content. Both are emitted correctly in the CSS — it is the demonstration that cannot show them with fixed-size children.
Why is there no align-content control?: Because it does nothing until flex-wrap has produced more than one line, at which point it becomes the property that distributes those lines. align-items positions items within a line, align-content positions the lines within the container, and a wrapped layout usually needs both — only the first is generated here.
What does flex-start mean under row-reverse?: The right-hand edge. Reversing the direction swaps main-start with main-end, so every justify-content value flips with it. It is also why row-reverse is an accessibility trap: focus and screen-reader order follow the DOM, so a visually reversed row is read and tabbed through backwards.
How do space-around and space-evenly differ?: space-around gives every item an equal margin, so gaps between items come out double the gaps at the ends. space-evenly makes all gaps identical, ends included. space-between puts nothing at the ends and splits the remainder — which with a single item leaves it sitting at flex-start.
Is gap safe to use in production?: For flexbox, yes since Safari 14.1 in April 2021 — notably later than flexbox itself, which was everywhere by about 2015. It is the one property in this output with meaningfully newer support than the rest, so supporting older Safari means falling back to margins on the children.

Common errors and gotchas

Confusing `justify-content` with `align-items`, which swap meaning when the direction changes.
Forgetting `min-width: 0` on a flex item, which is why long content refuses to shrink.
Using `flex: 1` and expecting equal widths, when the basis affects the result.
Setting a gap and a margin on the same axis, which then double up.
Reordering visually with `order`, which leaves keyboard and screen-reader order unchanged.