Visual game to learn Flexbox

Visual game to learn Flexbox(preview.webflow.com)

109 points by thesergie 10 years ago | 17 comments

throwaway2016a 10 years ago |

Also, 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!

devrelm 10 years ago |

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 10 years ago |

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

pcl 10 years ago |

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 10 years ago | |

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/

pcl 10 years ago | | |

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 10 years ago |

I prefer http://flexboxfroggy.com/

callmevlad 10 years ago | |

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 10 years ago |

In a similar vain:

- Flexbox Froggy - http://flexboxfroggy.com/

- CSS Diner - https://flukeout.github.io/

tsumnia 10 years ago |

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

soperj 10 years ago | |

There is an undo button.

vamega 10 years ago |

Is there a technical reason Firefox isn't supported?

callmevlad 10 years ago | |

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

neil_s 10 years ago |

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

jbotch 10 years ago | |

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

soperj 10 years ago | |

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.