Flexbox Playground

Set every flex property with a control, watch the boxes move, copy the CSS or Tailwind.

Processed locally — nothing is uploaded

flex-directionflex-wrapjustify-contentalign-itemsalign-contentgap · 12pxitems · 4

Click an item to cycle its flex-grow through 0, 1, 2, 3. The generated CSS adds a rule for each item that grows.

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

About Flexbox Playground

The properties are the ones people mix up: justify-content works along the main axis and align-items across it, and which axis is which flips the moment flex-direction becomes column. Changing direction here and watching the same alignment settle on the other axis is the quickest way to make that stick. Click a box to give it flex-grow and see how the leftover space is shared.

Every property a flex container takes is a control on the left: direction, wrap, justify-content, align-items, align-content and the gap, plus a slider for how many boxes to lay out. The preview on the right is a real flex container with those properties applied as inline styles, so what moves is the browser's own layout engine and not a picture of it. The CSS and Tailwind panes are generated from the same state the preview reads, which is why the two never disagree.

Clicking a box gives it flex-grow, stepping through 0, 1, 2 and 3. Growth is the property most people learn by accident: the values are ratios of the leftover space, so a box with 2 and a box with 1 split the spare room two-to-one, and a single growing box takes all of it. Watching the others hold their size while one stretches is more instructive than the specification's sentence about it.

Direction is where intuition breaks. Switch from row to column and 'center' on justify-content stops centring horizontally and starts centring vertically, while the boxes you had spaced across the width now stack — the property did not change, the axis it acts on did. The playground keeps every other setting when you change direction precisely so that you can see this happen to a layout you already understand.

Wrapping brings align-content into play, and only then. With a single line of boxes align-content does nothing, which is why it is the property that seems broken until you realise it distributes lines, not items. Turn wrap on, raise the item count until a second line appears, and the align-content control starts to matter.

Learn how this works

A Practical Guide to Everyday Developer Encoding & FormattingHow and when to use Base64, JSON formatting, hashing, JWTs, regex and cron — with free in-browser tools for each task.11 min read

Frequently asked questions

Why does align-items: center not centre my boxes vertically?

In a row container align-items works on the cross axis, which is vertical — but the container has to be taller than its content for there to be anywhere to centre. The preview has a fixed minimum height so the effect is visible; in your own CSS give the container a height, or use align-items on a column container where the axes swap.

What is the difference between space-between, space-around and space-evenly?

All three distribute leftover space between items. space-between puts nothing at the edges and equal gaps between; space-around gives each item equal space on both sides, so the edge gaps are half the inner ones; space-evenly makes every gap, edges included, identical. The preview with four boxes makes the difference obvious.

Should I use gap or margins?

gap. It applies between items only, never at the edges, and it works in both directions when the container wraps. Margins on items either leak into the container's edges or need last-child rules to suppress.

Why is the Tailwind class gap-3 when I set 12px?

Tailwind's spacing scale is a quarter-rem per unit, so 12px is gap-3 at the default 16px root size. Values that do not sit on the scale are emitted as arbitrary values, gap-[10px], which Tailwind supports directly.

Is anything sent to a server?

No. Everything runs locally in your browser using standard web APIs — your text, files and inputs are never uploaded to a server, so the tool works even offline once the page has loaded.

Is it free?

Completely. There is no sign-up, no account, no watermark and no usage limit. The tool is supported by unobtrusive ads, not by selling or processing your data.

Pro Tips

→When a layout misbehaves, set flex-wrap to wrap first. Most 'why is it overflowing' questions are a nowrap container with more content than width.
→Use flex-grow: 1 on the one element that should absorb the slack — a search box between a logo and a menu — and leave the others at 0.
→Prefer flex-start and flex-end to left and right in your head; they follow the writing direction, which matters the day the site is translated into Arabic.
→Copy the Tailwind output into a component and the CSS into a stylesheet; they describe the same layout, so use whichever the project already speaks.
→Share the link when asking for help: the whole configuration travels in it, so the person answering sees exactly what you see.

Common Use Cases

•Working out a navigation bar where the logo sits left, links right, and one search field takes the remaining width.
•Centring a card both ways in its container without the usual trial and error.
•Teaching flexbox: change one property at a time and watch the consequence, then read the CSS it produced.
•Producing the Tailwind classes for a toolbar without looking up which utility maps to which property.
•Reproducing a layout bug in isolation to include in a bug report or a code review comment.

How It Compares

Flexbox Froggy teaches the properties through a game and is the better way to learn them from nothing; CSS-Tricks' guide is the reference to keep open. Loading, Flexy Boxes and similar generators cover the same controls as this one. The differences here are the per-item flex-grow by clicking, the Tailwind output beside the CSS, and a configuration that saves and shares as a link, so a layout can be handed to a colleague rather than described.