
Visual game to learn Flexbox - thesergie
https://preview.webflow.com/preview/flexbox-game?preview=d1a26b027c4803817087a91c651e321f&m=1
======
throwaway2016a
Also, [http://www.flexboxdefense.com/](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.

~~~
virgil_disgr4ce
Haha yeah. Seems to be a pretty effective technique!

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

------
NDizzle
I don't normally use these kind of things, but this one was really well done.
Nice work! I actually completed it.

------
pcl
I love the tool itself... have you guys thought about some way to integrate it
into Chrome or FF as a development / debugging tool?

~~~
callmevlad
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/](http://things-
that-web-inspectors-should-have.webflow.io/)

~~~
pcl
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.

------
Vekz
I prefer [http://flexboxfroggy.com/](http://flexboxfroggy.com/)

~~~
callmevlad
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.

------
metasean
In a similar vain:

\- Flexbox Froggy - [http://flexboxfroggy.com/](http://flexboxfroggy.com/)

\- CSS Diner - [https://flukeout.github.io/](https://flukeout.github.io/)

------
tsumnia
Very cool, though I'd love to have an option to reset if possible

~~~
soperj
There is an undo button.

------
vamega
Is there a technical reason Firefox isn't supported?

~~~
callmevlad
Yep, more background here:
[https://news.ycombinator.com/item?id=9325796](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.)

------
neil_s
I cannot crack the last 3 :( Any hints anyone?

~~~
jbotch
(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 :).

