Flexbox Froggy

What Flexbox Froggy actually is

Twenty-four levels each hand you a pond and some misplaced frogs, and the only way to move them is by typing real CSS flexbox properties into the code panel. Levels introduce justify-content, align-items, flex-wrap and order one at a time, with the pond redrawing as you type.

Why it is worth your time

You remember what align-items does because you watched a frog slide to the wrong side of a pond the first time you got it wrong.

Common questions

Is Flexbox Froggy free?

Yes. Flexbox Froggy is free and does not ask you to register or hand over an email address before you can use it.

How long does Flexbox Froggy take?

Five to fifteen minutes of proper attention. We file it under "Coffee break" — learn CSS flexbox by getting frogs onto lily pads.

Does Flexbox Froggy work on a phone?

Flexbox Froggy really wants a mouse and a wide window. It will load on a phone, but the experience is built for desktop.

What kind of site is Flexbox Froggy?

We list it under Mind Benders — one more round, then bed. definitely. You remember what align-items does because you watched a frog slide to the wrong side of a pond the first time you got it wrong.