Visual game to learn Flexbox
preview.webflow.comAlso, http://www.flexboxdefense.com/ is more like an actual game.
It did get me to check out webflow though, which I'm guessing was part of the goal.
Haha yeah. Seems to be a pretty effective technique!
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.
I don't normally use these kind of things, but this one was really well done. Nice work! I actually completed it.
I love the tool itself... have you guys thought about some way to integrate it into Chrome or FF as a development / debugging tool?
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.
I prefer http://flexboxfroggy.com/
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.
In a similar vain:
- Flexbox Froggy - http://flexboxfroggy.com/
- CSS Diner - https://flukeout.github.io/
Very cool, though I'd love to have an option to reset if possible
There is an undo button.
Is there a technical reason Firefox isn't supported?
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.)
I cannot crack the last 3 :( Any hints anyone?
(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.