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;
}
Ad Placeholder

header horizontal Unit

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.

Ad Placeholder

below tool horizontal Unit