Our playing guide
Flexbox Froggy · How to play
Flexbox Froggy is an educational puzzle that asks you to type CSS. Lily pads show the target while your declarations immediately rearrange the frogs.
Controls
Type CSS declarations such as justify-content: flex-end; and advance when every frog reaches its pad. English instructions included.
Rules & goal
- Read the lesson and type CSS property declarations into the editor.
- Place each frog on a matching pad. Next becomes available when every frog is correctly placed.
- Twenty-four lessons introduce alignment, order, direction and wrapping. Settings include language and color assistance.
Beginner tips
- Try justify-content: flex-end; in the first lesson and watch where the main axis ends.
- After changing flex-direction, identify the new main axis before choosing alignment properties.
Progress & devices
Play in a desktop or mobile browser using the controls above. Some games save only in the current browser; clearing site data can remove saves. Pause when stepping away. Reloading is not guaranteed to preserve the current round.