CSS Flexbox Generator

How flexbox lays out a row of boxes

Flexbox is the CSS layout model for arranging items along a single axis — a row or a column — and distributing space between them. It splits the work into two sets of properties: those you put on the container (the flex parent) and those you put on each item (the flex children). This generator gives you live control of both. You adjust dropdowns and text fields, watch five coloured boxes rearrange in real time, and copy the exact CSS it produces — no memorising property names or guessing what align-content does.

The container controls govern the whole group at once:

The main axis versus the cross axis

The single most important idea in flexbox is that two of the alignment properties depend on direction. justify-content works along the main axis and align-items works along the cross axis. When flex-direction is row, the main axis is horizontal, so justify-content spreads items left-to-right and align-items aligns them top-to-bottom. Switch to column and the two axes swap: now justify-content controls vertical spacing. This is the detail that trips people up most, and the live preview makes it obvious — change the direction and watch which property suddenly starts behaving differently.

A worked example: a centred navigation bar

Say you want a row of items pushed apart with equal space and vertically centred. Set flex-direction: row, justify-content: space-between, and align-items: center. The generator immediately outputs:

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 8px;

Now click the third box in the preview to select it and set its flex-grow to 1. That one item expands to absorb all leftover space while the others stay their natural size — the classic "logo on the left, links pushed to the right" pattern. The per-item CSS panel updates to .item-3 { flex-grow: 1; ... }, and the Copy All button hands you every item's rules at once.

What the item controls do

• flex-grow — how greedily an item claims free space. 0 means "don't grow"; a higher number relative to siblings means a larger share.
• flex-shrink — how readily an item gives up space when the container is too small. 1 is the default; 0 refuses to shrink.
• flex-basis — the item's starting size before grow and shrink are applied (auto, a length like 200px, or a percentage).
• align-self — overrides the container's align-items for this one item.
• order — reorders items visually without touching the HTML; lower numbers come first.

Practical tips

• Prefer gap to margins. The gap property spaces items evenly without the awkward "extra margin on the last child" problem that margins create.
• The shorthand is flex: grow shrink basis. The familiar flex: 1 expands to flex: 1 1 0 — grow, shrink, and a zero basis — which is why flex: 1 items end up equal width.
• Use order sparingly. It changes visual order but not DOM order, so keyboard and screen-reader users still follow the source sequence. Reordering content with order can hurt accessibility.
• Wrapping needs align-content. It only has a visible effect once flex-wrap: wrap produces more than one line; on a single line it does nothing.

Common mistakes

• Trying to centre vertically with the wrong property. In a row, vertical centring is align-items: center, not justify-content. Reverse them and nothing appears to happen.
• Setting a fixed width and expecting flex to override it. An explicit width competes with flex-basis; prefer flex-basis for flex children.
• Forgetting display: flex on the parent. None of the flex properties do anything until the container is actually a flex container — which is why this generator always emits that line first.

Everything happens in your browser; the generator builds the CSS locally and copies it to your clipboard with nothing sent to any server. Paste the result straight into your stylesheet and it works exactly as previewed.