Flexbox Editor

What is a Flexbox visual editor?#

Flexbox is the CSS layout engine for arranging elements along a single direction (a row or a column) and distributing the free space between them. It answers questions that used to require floats, negative margins, and trial-and-error: “how do I center this vertically?”, “how do I make these three columns equal height?”, “how do I push one item to the far right while the rest stay left?”. Once you understand it, you reach for it on almost every page; until then, the property names (justify-content, align-items, flex-grow) trip up even experienced developers, because the spec overloads ordinary English words with very precise layout meaning.

This page is a live Flexbox playground. You tune the container properties and per-item overrides in the left sidebar; the right pane shows the result instantly and writes out the exact, copy-paste-ready CSS that produced it. The point is to stop guessing which value does what and instead see the effect the moment you change it — then copy the rule that worked.

How to use it#

The layout is split into a sidebar of controls and a preview + CSS output panel.

1. Set the container. Use the dropdowns in the sidebar:
   • Direction — row, row-reverse, column, column-reverse.
   • Justify content — distributes free space along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.
   • Align items — lays out children along the cross axis: stretch, flex-start, center, flex-end, baseline.
   • Wrap — nowrap keeps everything on one line; wrap and wrap-reverse let children flow to new lines.
   • Align content — appears only when wrapping is on; it spaces the lines of wrapped children.
   • Gap — a slider from 0 to 64 px; the live value reads out next to the label.
2. Manage the items. Under the Items header, + Add item inserts another flex child. Each item row exposes grow, shrink, basis, order, and align-self (a per-child override of the container’s align-items). Delete a child with its Delete button.
3. Watch the preview. The large box on the right is a real flex container — every change redraws immediately.
4. Copy the CSS. The generated rule block sits under the preview. Click Copy to grab it. When all items share the same values, a single .item block is emitted; the moment any item differs, the output switches to one .item:nth-child(N) block per child so each override stays unambiguous.

Key features#

• Container and per-child properties in one place. Nothing about Flexbox is hidden — flex-direction, both alignment axes, wrapping, gap, and per-item grow/shrink/basis/order/align-self are all live.
• Correct, minimal CSS output. align-content is only emitted when wrapping is actually on (it does nothing on a single line); equal items collapse to one block; order and align-self appear only when non-default. The output is the shortest rule that reproduces what you see.
• The flex shorthand, done right. Each child serializes as flex: <grow> <shrink> <basis> — the canonical three-value form that avoids the surprising defaults of the shorthand’s missing values.
• Basis is validated. Type auto, 0, 200px, 50%, or 10rem and it is accepted; an invalid basis is flagged and falls back to auto instead of silently producing broken CSS.
• Preview forced left-to-right. Flexbox’s row is defined as left-to-right semantics, so the preview is pinned LTR regardless of the page language — what you see matches what your stylesheet will do.

Worked example#

A common layout: a header row with a logo pinned left, a title that takes the remaining space, and an action pinned right — evenly spaced with a fixed gap.

• Direction: row
• Justify content: space-between
• Align items: center
• Wrap: nowrap
• Gap: 16px
• Items: three children, the middle one with grow 1 so it absorbs the free space, the others at the default flex: 0 1 auto.

The generated CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

Because the second child grows and the others do not, the output correctly uses three separate nth-child blocks. Drop this into any project and the logo hugs the left edge, the action hugs the right, and the title fills the middle — no floats, no margins.

FAQ#

justify-content vs align-items — which is which?#

justify-content always works along the main axis (the direction flex-direction sets — horizontal in a row, vertical in a column). align-items always works along the cross axis (perpendicular to the main axis). So in a row, justify-content controls left/right spacing and align-items controls top/bottom alignment. Flip the direction to column and they swap roles. Remembering “justify = main, align = cross” saves you from the most common Flexbox confusion.

When does flex-grow actually do something?#

Only when there is free space to absorb. If three children each have flex-grow: 1 and the container is wider than the children need, the leftover space is split into thirds and added equally. If the container is exactly full, nothing grows. Set flex-grow: 0 (the default) and a child refuses to expand, letting its siblings take the space instead. flex-shrink is the mirror: it decides who gives up space first when there is not enough room.

Why is my gap not showing up?#

Three usual causes: the children have a fixed width that fills the container completely (no room for gaps), flex-wrap: nowrap is forcing children to overflow instead of wrapping into the gap-aware layout, or a margin on the children is visually masking the gap. The slider here goes to 64 px; if you need more, the underlying property accepts any length, so copy the CSS and raise gap in your own file.

The output uses nth-child — can I use a class instead?#

Of course. The .item:nth-child(N) selectors are emitted because they unambiguously map to the preview when items differ. In real code, swap them for your own classes (.logo, .title, .action) — the declarations inside stay identical. When every child matches, the tool already emits a single shared .item block you can rename in one place.