Flexbox Playground

Toggles every flex property on a live example and shows the CSS and what each property changed.

Every flexbox property on a live example, with a line under each control saying what it actually does. The preview is the browser’s own flex layout and the CSS is that state written down, so what you see is what your page will do.

🔒 Runs entirely in your browsercssflexboxlayoutlearn

Preview

Height

Click an item to edit its own properties on the right.

Container

flex-directionThe direction of the main axis. `row` lays items out horizontally, `column` vertically; `-reverse` flips the order.flex-wrapWhether items move to a new line when they do not fit. With `nowrap` they shrink instead, however small that makes them.justify-contentHow the spare space on the main axis is distributed. `space-between` pins the ends; `space-evenly` makes every gap equal.align-itemsWhere items sit on the cross axis. The default is `stretch`, which is why an item with no height fills the container.align-contentHow the block of lines is placed on the cross axis when there is more than one. With a single line it does nothing at all.gap: 12pxThe space between items. Unlike margin, it does not appear on the outside edges.

Item 1

flex-grow: 0The share of the spare space this item takes. All at 1 divides it equally; one at 2 gives that item twice as much.flex-shrink: 1How much this item gives up when there is not enough room. At 0 it does not shrink and overflows instead.flex-basisThe starting size before growing or shrinking. `auto` is the content size; `0` ignores the content and divides purely by grow.align-selfOverrides align-items for this one item.order: 0Display order — lower comes first, and equal values keep the markup order. Screen readers and tab order follow the markup, so be careful.Content

Code

.container {
  display: flex;
  gap: 12px;
}

· The main axis runs horizontally.
· Every flex-grow is 0, so justify-content is what divides the spare space.

Properties left at their default are not written out. Only what you changed appears.

The preview is the browser’s own flexbox and the CSS is that state written down, so what you see here is what the page will do. For a two-dimensional layout, go to the CSS grid generator.

How to use it

Set the container properties
Direction, wrapping, and the three alignment properties. Each has a sentence under it explaining what it changes — `align-content` in particular does nothing at all with a single line.
Click an item to edit it
Grow, shrink, basis, align-self and order apply to one item. Add and remove items to see how the container redistributes.
Read the notes and copy the CSS
The panel describes what your current layout will actually do, and the output omits every property still at its default — so what you copy is only what you changed.

Common questions

Why does my item overflow instead of shrinking?

Either `flex-shrink: 0`, or a child with a minimum content size. A flex item’s `min-width` defaults to `auto`, which means it will not shrink below its content — a long unbroken string or a wide image is the usual culprit. `min-width: 0` is the fix.

What is the difference between `align-items` and `align-content`?

`align-items` places each item on the cross axis. `align-content` places the *block of lines* when wrapping has produced more than one — so with `nowrap`, or with a single line, it does nothing whatsoever. That is the most common source of "this property is broken".

Should I use `order` to rearrange things?

Sparingly. It changes the visual order and not the DOM order, so screen readers and tab order still follow the markup. A keyboard user tabbing through a visually reordered layout jumps around the screen — which is why the spec calls it a last resort.

Flexbox or grid?

Flexbox for one dimension — a row of buttons, a toolbar, a card’s internals. Grid when rows and columns have to line up with each other. If you are nesting flex containers to fake a grid, you want a grid.