Flexbox Playground

Visual flexbox builder with presets, responsive preview, and multi-format output.

Layout Presets

Preview width:
Main: horizontalCross: vertical
1
2
3

Container

Direction
Wrap
Justify
Align Items
Row Gap8px
Col Gap8px
Click an item to edit its properties
/* Container */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 8px;
}

/* Children */
.flex-item-1 {
  flex: 0 1 auto;
}

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

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