Write CSS flexbox rules that move colored frogs onto the lily pads that match them, one lesson per level.
Flexbox Lily Pond turns CSS flexbox into a frog-sorting job. A line of frogs in red, yellow and green waits beside a set of lily pads, and every frog has to end up on the pad that matches it. Getting them there means writing genuine CSS for the pond, the same kind of code that arranges items on a web page.
Your rules apply as you type, so the frogs slide around with each change. Seeing the result instantly makes each property much easier to remember.
How a level works
Every level shows a short lesson, a code box and the pond itself. The #pond rule starts with display: flex; already written, so you only supply what is missing. You get exactly as many lines as the answer requires. Once every frog sits on a pad of the same color, the Next button lights up.
Any valid code that gets the frogs home will pass. You do not have to match one exact answer. Pressing Enter on the last line also tries to submit.
What you will learn
Across 24 levels, new properties arrive gradually, roughly like this:
justify-contentfor sideways placement andalign-itemsfor vertical placement.flex-directionto turn the row into a column or reverse it.orderandalign-self, which target one frog instead of the whole group.flex-wrapand theflex-flowshorthand to spread frogs over several lines.align-contentto space those lines apart.
Later stages mix several of these in one answer. Highlighted property names in the lessons open a list of every value they accept.
Common mistakes
The most frequent slip is forgetting that flex-direction changes the main axis. Once frogs are stacked in a column, justify-content works vertically. A reversed direction, such as row-reverse, also flips where flex-start and flex-end sit.
Another mix-up is the two align properties. align-items positions frogs inside each line, while align-content spaces whole lines apart when they wrap. If nothing moves, check whether your frogs are actually wrapping onto more than one line.
On the order and align-self levels, you get a rule for just one frog color. Change only that frog, and leave the rest of the pond alone.
Why it’s worth a try
Flexbox is one of the most useful layout tools on the web, and practicing it with instant feedback beats reading a reference page. The levels are short, so you can fit a few into any spare moment.
Controls
| Action | Keyboard | Mouse | Touch |
|---|---|---|---|
| Type CSS | Type in the code box | — | Tap the code box and use the on-screen keyboard |
| Submit a correct answer | Enter on the last line, or Ctrl + Enter | Click "Next" once it lights up | Tap "Next" |
| Pick a level | — | Click the level counter, then a level number, or use the side arrows | Tap the level counter, then a level number |
| Read about a property | — | Click a highlighted property name in the instructions | Tap a highlighted property name |
| Change difficulty or colorblind mode | — | Click "Settings" under the editor | Tap "Settings" |
Flexbox Lily Pond FAQ
Is Flexbox Lily Pond good for a class or a Chromebook?
Yes. It teaches flexbox one property at a time, and you practice each idea right away on the pond. A school Chromebook with a keyboard works well. On a phone, the editor and pond stack vertically and you type with the on-screen keyboard.
Does it save my progress?
Yes. Your answers and the levels you have solved are kept in your browser. The level menu flags each one you have finished, so you can see at a glance which ones are left.
Is there help for colorblind players?
Yes. Turning on colorblind mode gives the frogs and pads added symbols. That way you can tell which frog belongs on which pad without relying on color alone.
How do the difficulty settings differ?
Beginner shows the full lesson for each level. Intermediate hides the lesson, so you work out the answer from the pond alone. Expert hides it as well and jumps to a level picked at random whenever you continue.
