Visual game to learn Flexbox (opens in new tab)

Haha yeah. Seems to be a pretty effective technique!

We've been advocating moving our visual implementation (or something similar) to dev tools in both FF and Chrome. Here are some before/after examples to show you how a more abstract input method can really speed up development: http://things-that-web-inspectors-should-have.webflow.io/

Hey Kev, we actually worked with Tom Park (the creator of Flexbox Froggy) to apply the same exact concept to a more visual paradigm - so they're meant to serve the same purpose, but the visual version is meant to be more approachable to people who don't have as much experience with raw CSS. I hope that makes sense.

There is an undo button.

Yep, more background here: https://news.ycombinator.com/item?id=9325796

(We're working around this soon though by moving away from native scrollbars, since it's very unlikely that Firefox will fix this anytime soon.)

(Spoiler coming)

For 26:

- Changed the order to have 1 at the end, aligned it at the bottom, then set its width to 100%. Then, for the parent container, click "Wrap children", so that 1 gets its own line. 1 should now be done. - Next, click the parent container. For the row layout, align them the right end. This gets 2 and 3 properly aligned on the right side. - Finally, click 3, and click "Align Self: End". This gets 3 properly positioned vertically.

The key insight for me was to realize the easiest way is to get it to work with the row layout. If 1 is at the beginning there's no magic mix of widths that will work, which means 1 needs its own line & therefore must be at the end position-wise. Haven't done 27 and 28 yet :).

26 gave me a hard time because I kept trying to do them vertically. Once I completed 27 & 28 w/ horizontal tiling I finally cracked 26.