This is great! I enjoyed flexboxfroggy.com, but this seems to go into a bit more depth in terms of the number of flexbox properties being shown off. It takes a bit to work out what the actual css being used is, but it's otherwise a great way to play and learn what flexbox can do.
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/
Feature request: I understand your goal of visual tooling, but it'd be neat if I could turn on a mode in which the css for a given operation showed up in the tooltip, instead of english descriptions.
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.
- 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 :).
It did get me to check out webflow though, which I'm guessing was part of the goal.