HomeCSS ToolsFlexbox Playground

Flexbox Playground

Explore and master CSS Flexbox interactively. Adjust container and item properties with live preview. Generate ready-to-use CSS code.

Container Properties

12px
Live PreviewClick an item to edit its properties
1
2
3
4
Generated CSS
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
}

.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

.flex-item-4 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

Interactive Items

Click any flex item in the preview to select it and edit its flex-grow, flex-shrink, and align-self properties.

Add & Remove Items

Dynamically add up to 8 flex items and remove any item to see how your layout adapts in real time.

Learn Flexbox

The best way to learn is by doing — tweak each property and instantly see the effect in the live preview.

Need help with Flexbox?

Learn how to master 1D layouts and space distribution with our expert guide on axes, alignment, and modern flex patterns for responsive web design.

Read our Flexbox Guide