CSS Showcase · Live Demo

Flexbox, one tap at a time.

Toggle flex-direction, justify-content, align-items, flex-wrap, and gap inside a device frame.

Flex playground

mobile
1
2
3
4
5
flex-direction
justify-content
align-items
flex-wrap
styles.css
.flex-box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}

.flex-item {
  flex: 0 1 auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
}

CSS features used

  • • display: flex
  • • flex-direction
  • • justify-content
  • • align-items
  • • flex-wrap
  • • gap

Every control writes directly into the CSS on the right — no JS layout math.