Labs/Flexbox Game

Flexbox Game

A hands-on CSS flexbox trainer. Each level asks you to move the items onto their target outlines using only justify-content, align-items, and flex-direction — the fastest way to internalize how flexbox positions things.

Push to the end

Move the solid dots onto the dashed targets using flexbox.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

Runs entirely in your browser — your data never leaves this page.