Visual game to learn Flexbox (opens in new tab)

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/

(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.

Haha yeah. Seems to be a pretty effective technique!

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.)