Toolative
Back to tools

Flexbox Playground

Visually explore every flexbox property and instantly get the generated CSS.

Container
flex-direction
flex-wrap
justify-content
align-items
align-content
gap
px
Preview
1
2
3
4
5

Click a box to select it and edit per-item properties

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

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

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

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

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

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