Flexbox Game

A game to master CSS Flexbox by aligning green boxes to targets.

Flexbox Grid Master

Align the green boxes with the red targets to master Flexbox.
Level
1 / 5
Objective
Match the distribution

Perfectly Aligned!

"Flexbox allows items to fill space and align within a container."

Features

  • Interactive Flexbox Game: Learn Flexbox by solving 5 levels of alignment puzzles.
  • Visual Verification: Real-time feedback with target zones.
  • Master Mechanics: Understand `justify-content` and `align-items` deeply.

How to Use

  1. Observe the red target boxes on the grid.
  2. Use the buttons to change `justify-content` (horizontal) and `align-items` (vertical).
  3. Align your green boxes to match the red targets.
  4. Advance to the next level upon success!