Initializing, please wait a moment

Flexbox Froggy - Learn CSS Flexbox by Playing

Learn CSS flexbox by playing: Flexbox Froggy has you typing flex properties into a live editor so each frog hops onto its matching lilypad, across 24 levels. About ~1.0 MB after Play, no install, no account.

Pipe Rotate Puzzle is a different kind of browser puzzle worth a look, and Cat Typing Race covers the typing-practice angle instead.

FLEXBOX FROGGY

Seating frogs on lilypads is the whole game: type the CSS flexbox rule into the left-hand editor and watch them hop. It climbs from justify-content through flex-wrap across 24 levels, and your place in the sequence is remembered locally under ftol:flexboxfroggy keys. Adapted from Thomas Park's Flexbox Froggy (MIT). About ~1.0 MB.

A keyboard for typing CSS plus a mouse for scrolling works best; give it a wide screen so the editor and pond sit side by side.

Press Play to load the game.
Level progress uses namespaced localStorage (ftol:flexboxfroggy:*).

Welcome to Flexbox Froggy - a free browser CSS flexbox teaching game with no account or install.


Key features

  • Write flex properties so frogs hop onto matching lilypads across 24 levels.
  • About ~1.0 MB loads after you press Play.

Your progress and privacy

  • Progress stays in this browser under namespaced ftol:flexboxfroggy keys; use Reset in the level menu to clear saved answers.
  • Nothing is uploaded; play stays on-device.

More free browser games

For more free browser games, open the games hub. Related picks: Pipe Rotate Puzzle and Vim Motion Academy.