Flexbox playground

An interactive flexbox playground: tweak container properties (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) and item properties (flex-grow/shrink/basis, align-self, order), preview live, copy the matching CSS and read the full cheat sheet.

Runs in your browserEvery computation happens in your browser — your data never leaves this device.

Live preview

The preview is a real flex container, so every change shows up immediately

4 / 10 · 1–10 items

Container properties

Properties that live on the flex container

display

flex-direction

flex-wrap

justify-content

align-items

align-content

gap12px

Item properties

Applies to the selected item and is emitted as a :nth-child(n) override

ItemsSelect an item first, then tweak its properties

flex-grow0

flex-shrink1

flex-basis80px

align-self

order0

Equivalent CSS

The first item becomes the base .flex-item rule, the others become :nth-child(n) overrides

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

.flex-item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 80px;
  align-self: auto;
  order: 0;
}

.flex-item:nth-child(2) {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 80px;
  align-self: auto;
  order: 0;
}

.flex-item:nth-child(3) {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 80px;
  align-self: auto;
  order: 0;
}

.flex-item:nth-child(4) {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 80px;
  align-self: auto;
  order: 0;
}

Property cheat sheet

What every common value does, kept at default-ish values so differences stay visible

display

display: declares a flex container, flex or inline-flex

flexBlock-level flex container, takes a full line
inline-flexInline-level flex container, can sit next to text

flex-direction

flex-direction: the main axis, which decides the item order

rowHorizontal, left to right (default)
row-reverseHorizontal, right to left
columnVertical, top to bottom
column-reverseVertical, bottom to top

flex-wrap

flex-wrap: whether items wrap onto new lines

nowrapNo wrapping, items get squeezed (default)
wrapWrap, first line on top
wrap-reverseWrap, first line at the bottom

justify-content

justify-content: alignment of items along the main axis

flex-startPacked to the start of the main axis (default)
flex-endPacked to the end of the main axis
centerCentered on the main axis
space-betweenFlush to both ends, free space split between items
space-aroundEqual space on both sides of each item, half a gap at the ends
space-evenlyEvery gap, including the ends, is exactly equal

align-items

align-items: alignment of a single line along the cross axis

stretchStretch to fill the cross axis when no size is set (default)
flex-startAligned to the start of the cross axis
flex-endAligned to the end of the cross axis
centerCentered on the cross axis
baselineAligned to the baseline of the first line of text

align-content

align-content: distribution of multiple lines on the cross axis, needs flex-wrap: wrap

stretchEvery line stretches across the cross axis (default)
flex-startAll lines packed to the start of the cross axis
flex-endAll lines packed to the end of the cross axis
centerAll lines centered on the cross axis
space-betweenFirst line at the start, last at the end, free space between lines
space-aroundEqual space around each line, half a gap at the ends
space-evenlyEvery line gap, including the ends, is exactly equal

gap

gap: spacing between items, no more margin math

10pxSpacing between items, and between rows once they wrap

flex-grow

flex-grow: how much free space the item takes

2Higher numbers get more of the free space, 0 means no growth (default)

flex-shrink

flex-shrink: how much the item shrinks under pressure

00 means never shrink (may overflow), 1 shrinks proportionally (default)

flex-basis

flex-basis: the starting size along the main axis

120pxWins over width / height, auto falls back to the content size

align-self

align-self: one item overrides the container align-items

autoInherit the container align-items (default)
flex-startThis item sits at the start of the cross axis
flex-endThis item sits at the end of the cross axis
centerThis item is centered on the cross axis
baselineThis item aligns to the text baseline
stretchThis item stretches across the cross axis

order

order: changes the visual order without touching the DOM

-1Lower numbers come first, default 0, negatives are fine

What this tool does

Stop guessing the difference between space-between and space-around: flip the value and watch the live preview instead of reading the spec.
Export the container and item settings as ready-to-paste CSS: one rule for the container, a .flex-item base rule, then :nth-child(n) overrides for the rest.
Debug "align-items does nothing": usually the container has flex-wrap: wrap so you need align-content, or an item has an align-self override.
Use it as a flexbox cheat sheet — every common value comes with a one-line explanation, handy when you forget whether flex-basis or width wins.

Example

Input

Container: justifyContent = space-between, alignItems = center, gap = 16px; 2 items with flex-grow 1 on the second

Output

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

.flex-item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 80px;
  align-self: auto;
  order: 0;
}

.flex-item:nth-child(2) {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 80px;
  align-self: auto;
  order: 0;
}

The exported CSS spells out every property, including the ones left at their defaults, so you can copy the whole block. The preview is a real flex container, so changes show up instantly.

Frequently asked questions

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

align-items positions the items inside a single line along the cross axis. align-content distributes the lines themselves and only does anything once flex-wrap: wrap produces more than one line — that is why changing it in a single-line layout has no visible effect.

Which wins, flex-basis or width?

Inside a flex container flex-basis wins: it sets the starting size along the main axis, and width only applies when flex-basis is auto. So once you set flex-basis: 80px, changing width does nothing.

Why does justify-content: space-between pin items to both ends?

space-between hands all the free space to the gaps between items, so the first item sits at the main-axis start and the last at the end with no edge spacing. Use space-around for half a gap at the edges, or space-evenly for perfectly equal gaps.

Why does an item overflow instead of shrinking?

Items only shrink when flex-shrink is greater than 0, and even then flex-basis plus the automatic minimum size (min-width: auto) can stop them. Set flex-shrink: 0 on an item and it will never give up space, so overflow becomes possible.

Does the playground record what I do?

No. Validation and CSS generation happen entirely in your browser, the page sends no requests, and your settings are never stored on a server.

Keywords：flexboxflexcssjustify-contentalign-itemsflex-grow弹性布局伸缩布局布局调试前端布局

What this tool does

Example

Frequently asked questions

Related tools