Flexbox Playground

Interactive CSS Flexbox playground to learn and generate flex container and item properties

Processed locally in your browser

Free

No ads

No account required

Preview

Click an item to edit its individual flex properties. Add up to 12 items.

Layout Presets

Generated CSS

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

Container

flex-direction

justify-content

align-items

flex-wrap

gap8px

Item Properties

Click on an item in the preview to edit its properties.

All Items

Item 1

Item 2

Item 3