CSS Flex Playground

Experiment with CSS flexbox visually. Tune flex-direction, justify-content, align-items, flex-wrap, gap, and per-item order, grow, shrink, basis, and align-self, then copy the generated container and item CSS.
Loading...
Container Settings & Items
Items3
AItem Aflex: 0 1 auto
BItem Bflex: 0 1 auto
CItem Cflex: 0 1 auto
Live Previewflex container
A80×60
B100×80
C60×100
Generated CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

.item-a {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  width: 80px;
  height: 60px;
}

.item-b {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  width: 100px;
  height: 80px;
}

.item-c {
  order: 2;
  flex: 0 1 auto;
  align-self: auto;
  width: 60px;
  height: 100px;
}
©2026 Itung.online. Built for practical online workflows.
This site is protected by reCAPTCHA and the GooglePrivacy PolicyTerms of Serviceapply.

Overview

The CSS Flex Playground is a live, visual sandbox for flexbox. Change container properties like flex-direction, justify-content, align-items, flex-wrap, and gap, then tune each item's order, grow, shrink, basis, and align-self. The preview updates instantly and the generated container and item CSS can be copied.

Common Use Cases

How to Use

1
Adjust the container controls: direction, justification, alignment, wrap, gap, and height.
2
Tune each item with order, flex-grow, flex-shrink, flex-basis, align-self, width, and height.
3
Watch the live preview update on every change.
4
Copy the generated CSS block and paste it into your project.

Example Scenario

Three cards spread across a row

Set direction to row, justify-content to space-between, align-items to stretch, and remove the fixed item heights (set them to 0). The three items spread evenly and each stretches to the container height, producing the classic card row.

Technical Notes

Each item outputs the shorthand flex: grow shrink basis. For example, flex: 1 1 0% makes the item grow and shrink equally from a zero base.

flex-basis accepts auto, a length like 150px or 30%, or a unitless number which the playground converts to px.

Items use min-width and min-height of 0 so shrinking behaves like a real flex layout instead of stopping at content size.

To see align-items: stretch, clear the item height. An explicit height overrides stretch.

Common Mistakes

Frequently Asked Questions

justify-content aligns items along the main axis (the direction). align-items aligns them along the cross axis (perpendicular). In a row, justify moves items horizontally and align moves them vertically.

It is shorthand for flex: 1 1 0% — the item can grow and shrink and starts from a zero base, so space is distributed evenly between flexible items.

Flex items default to min-width: auto, which prevents shrinking below content size. The playground sets min-width and min-height to 0 so shrink works as expected.

This playground is about flexbox sizing, not font units. em relates to typography; flex-grow, flex-shrink, and flex-basis control how space is distributed among flex items.

Related Topics

CSS flexboxFlex containerFlex itemjustify-contentalign-itemsflex-grow