CSS Flexbox Playground and Generator

Try every flexbox property on live boxes and copy the resulting CSS.

Container

flex-direction

flex-wrap

justify-content

align-items

align-content

row-gap (px)

column-gap (px)

Drag the preview's bottom-right corner to resize it and watch items wrap and shrink.

Item 1

flex-grow

flex-shrink

flex-basis

align-self

order

CSS

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

HTML

<div class="container">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
</div>

Use via API

Generate flexbox CSS and HTML for a container and its items (direction, wrap, justify, align, gaps, and per-item flex, align-self and order). Defaults are left out of the CSS. Send JSON, get JSON back.

POST https://pithlab.com/api/v1/tools/flexbox-playground

curl https://pithlab.com/api/v1/tools/flexbox-playground \
  -H "Authorization: Bearer $PITHLAB_KEY" \
  -H "Content-Type: application/json" \
  -d '{"justifyContent":"space-between","alignItems":"center","items":"[{\"grow\":1},{\"grow\":2,\"basis\":\"0%\"},{}]"}'

Fields and response OpenAPI document Get an API key

About the Flexbox Playground

Experiment with CSS flexbox: set direction, wrap, justify-content, align-items and gap, tweak grow, shrink, basis and order per item, and copy the CSS.

How to use the Flexbox Playground

Set the container properties: direction, wrap, justify-content, align-items, align-content and the row and column gaps.
Click an item in the preview (or use its button) to select it, then change its grow, shrink, basis, align-self and order.
Add or remove items to see how wrapping and free space behave.
Copy the CSS and the matching HTML. Only properties that differ from the defaults are written out.

Examples

Centre items on both axes

Input

justify-content: center, align-items: center, gap 0

Output

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Wrapping card row with a 16px gap

Input

flex-wrap: wrap, justify-content: space-between, gap 16

Output

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
}

Item that fills the remaining space

Input

item 2: grow 1, shrink 1, basis 0%

Output

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

.item-2 {
  flex: 1;
}

Frequently asked questions

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

justify-content distributes items along the main axis (horizontal for row, vertical for column). align-items positions them on the cross axis, at right angles to it. Switching flex-direction swaps which way each one works.

Why does align-content do nothing?

align-content only spaces out lines of items, so it needs flex-wrap set to wrap and enough items (or a narrow enough container) to make more than one line, plus spare height in the container.

What does flex: 1 mean?

It is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0%. Every item with flex: 1 starts from zero width and shares the free space equally, which makes equal-width columns.

Does order change the order for screen readers?

No. order only changes the visual order; keyboard focus and screen readers still follow the HTML. Use it sparingly and keep the source order meaningful.