Flexbox Froggy asks you to move frogs onto matching lily pads by writing CSS. It is useful as a small layout exercise because you can see the effect of a declaration immediately. A keyboard and enough screen space for the editor make the exercise easier.
Start with the container
Flexbox rules operate on the relationship between a container and its children. Read the level’s explanation, identify the rule it introduces, and enter that declaration in the editor. Avoid copying a long solution before testing what one property does.
Main axis and cross axis
With flex-direction: row, the main axis follows the row. With flex-direction: column, it follows the column. justify-content distributes items along the main axis; align-items positions them on the cross axis.
For example, centering along both axes involves justify-content: center; and align-items: center;. In a real page, the container also needs enough available space for those changes to be visible.
When the frogs move the wrong way
- Check whether the level uses a row or column.
- Check for a reversed direction.
- Confirm that you changed the relevant axis.
- Remove extra declarations and test one change at a time.
Ordering and wrapping
Later tasks use the order of individual items or multiple lines. Reordering changes visual placement; in your own pages, it should not replace a sensible document order. Wrapping also introduces a distinction between aligning items within a line and distributing several lines.
Test understanding outside the pond
After a level, describe why the declaration worked without looking at it. Then try the same property on a simple row of buttons or cards in your own HTML. If you can predict the result after changing the direction, you have learned more than the level’s answer.