Hello KeyboardGames

Coding Puzzle · Play now

Flex Pond

Flex Pond

Write Flexbox CSS to guide the frogs to their lily pads.

Flex Pond cover
Loading game…

HOW TO PLAY

How to play Flex Pond

Enter Flexbox properties across eight increasingly challenging levels. Adjust the frogs’ positions until they reach the matching lily pads.

Controls

  • Enter layout declarations in the CSS field
  • Select Run code to check; use the arrows to change levels

Tips

  1. Try justify-content first to position items along the main axis.
  2. Use align-items to position them along the cross axis.