Identify the axis before choosing a CSS property
Read the level's target lily pads and inspect the current arrangement of frogs. In the default row direction, justify-content works along the horizontal main axis and align-items along the vertical cross axis. Before typing a value, state which axis you want to change. This habit prevents a common mistake: choosing the right-looking value for a property that controls a different direction.
When flex-direction changes to column, the main and cross axes change with it. Re-evaluate the property instead of assuming that justify-content always means horizontal movement. Enter one CSS change in the editor and compare the resulting positions with the targets. The frogs are positioned by your CSS, not dragged into place. Use the level's hints and allowed properties to keep the experiment tied to the task actually shown.
Explain an unsuccessful change before trying another
After a change misses the target, ask whether the property affected the wrong axis, the chosen value arranged items differently from your expectation, or the current direction changed the meaning of the layout. Keep the part of the rule you understand and revise one thing. Replacing several properties at once can reach the target while leaving you unsure which change solved the problem.
For a review exercise, describe the successful rule in words before moving on: which axis it used and how it positioned the frogs relative to the lily pads. Later levels can combine ideas, so this explanation is more useful than memorizing a line without its context. This guide does not provide an invented complete answer list or claim that solving the game certifies professional CSS skill. The linked play page gives the editor controls and exact task framing; the center supports understanding and practice across the levels you actually encounter.
For example, if a rule changes the frogs vertically when you intended horizontal movement, inspect flex-direction and identify the current main axis before selecting another value. Say the relation aloud: this property changes distribution along the main axis, and the main axis currently runs in this direction. Then make one edit and inspect the result. Once it works, test your explanation against the visible lily pads. This turns a failed guess into a reusable layout idea instead of a command you remember only for one screen.
Flexbox Froggy tips and strategy
Tick a tip to focus on in your next run. This checklist does not change your game or save progress.
Flexbox Froggy questions and answers
Do I need to install a coding tool?
No. The CSS editor is inside the browser game.
Is this a complete web-development course?
It is an interactive practice game for flexbox layout concepts. It does not replace a broader HTML and CSS course.
Who created the project?
Thomas Park created Flexbox Froggy. The source is MIT-licensed and the recorded artwork uses CC BY 3.0; attribution links are below.
Why does flex-end move a frog the opposite way after reversing direction?
Flexbox start and end follow the current main axis, not fixed left and right edges. With row-reverse, the main axis starts on the right, so justify-content: flex-end moves items toward the left. Check flex-direction first, then choose the alignment value. Changing align-items instead adjusts the cross axis and solves a different problem.
Controls and full game instructions
Controls and full game instructions
Play Flexbox Froggy