Initializing, please wait a moment
How to Play Flexbox Froggy - Step by Step
The Flexbox Froggy page loads a ~1.0 MB CSS flexbox teaching game in an iframe.
Step 1 - press Play
Press Play to inject the iframe (~1.0 MB). The editor and pond appear side by side.
Step 2 - read the prompt
Each level names a flex property to practice (justify-content, align-items, flex-direction, and more).
Step 3 - type CSS
Enter the property in the code box. Frogs move live as your CSS applies to the pond flex container.
Step 4 - Next / Reset
Click Next when frogs match lilypads. Use the level menu Reset to clear ftol:flexboxfroggy localStorage progress.
| Setting | Value | Notes |
|---|---|---|
| Download | ~1.0 MB | HTML+CSS+JS+SVG+jQuery |
| Input | keyboard CSS | mouse for Next/menu |
| Saves | localStorage | ftol:flexboxfroggy:* |
| Core loop | type flex - Next | 24 levels |
See when to play, comparisons, and Vim Motion Academy.
Why trust these tools
- Ten-plus years of web tooling. The freetoolonline editorial team has shipped browser-based utilities since 2015. The goal has never changed: get you to a working output fast, without an install.
- No install, no sign-up. Open a tool and get a working output in seconds - nothing to download and no account to create. Tools that need heavy processing run it on our service, so even a low-powered machine gets the job done.
- Analytics stops at the page view. We measure which pages get visited, not what you type or upload inside a tool. There is nothing to sign in to and no profile is attached to your input.
- Open-source core components. The processing engines underneath (libheif, libde265, pdf-lib, terser, clean-css, ffmpeg.wasm, and others) are public and audit-able. We link to each one in its tool page's footer.
- Free, with or without ads. All tools are fully functional without sign-up. The Disable Ads button in the header is always available if you need a distraction-free run.
Loading reviews...