Learn Computer Academy
বাংলা

Flexbox Playground

Every container and item property, live — drag nothing, just turn the knobs and watch real flexbox do the work. See exactly how order changes what you see without touching what’s actually in the HTML.

Browse the CSS lessons

There isn’t a dedicated flexbox lesson yet — this playground teaches the concept itself through the explanation panel below.

Container

flex-direction
flex-wrap
justify-content
align-items
align-content

Items (3)

Numbers are fixed HTML/DOM order — they never move. Only the visual position changes.

Item 1

flex-basis
align-self
1
2
3

Container size

Presets

Generated CSS

.container {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.item:nth-child(1) {
  flex-grow: 1;
}

.item:nth-child(2) {
  flex-grow: 1;
}

.item:nth-child(3) {
  flex-grow: 1;
}

Hover or tap a field to see what it does.

Numbers are fixed HTML/DOM order — they never move. Only the visual position changes.