Skip to content

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.

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.