Flexbox Froggy

Flexbox Froggy is a browser game that teaches CSS flexbox layout through puzzles. You help a frog reach a lily pad by writing a few lines of CSS on each level.

The game has 24 levels, and each one asks you to use a flexbox property to move the frog. The examples show how the justify-content property aligns items, along with its values. You type your CSS into the editor and the frog moves as you change it. The game is a quick way to see how layout rules work without reading a full guide.

• 24 levels that build step by step
• Practice with justify-content values
• Edit CSS and see the result at once
• Covers flex-start, flex-end, center and space-around
• Source code available on GitHub

Flexbox Froggy suits beginners who are learning CSS for the first time. It also works well for teachers who want a simple tool for a lesson on layout.

The game is free to play in the browser, and its source code is released under the MIT license. The game focuses on flexbox, so it does not cover other layout systems in depth. For grid layout, the page suggests a separate game. Play it alongside a grid tutorial if you want to learn both.