Flexbox is much easier to grok than the old ways of floats and clearfix. Hot tip: Use different background colors when you play around so you can see each of the elements.
Firefox dev tools have some useful stuff for identifying such things in flex and grid, handy for flexbox and extremely useful in grid. In the DOM tree in the Inspector tab, you click on the “flex” or “grid” label and it enables it, or enable it in the Layout subtab on an element. I think Chromium has decent tooling along these lines now too.
This game definitely helped me to wrap my head around the changes Flexbox allows with inline/block axes, but looking back, it really glosses over the actual "flexible box" part, i.e. child elements growing and shrinking, intrinsic sizing, etc. Are there any similar resources that touch on that aspect more?
I made https://www.flexulator.com to visually explain the spacing algorithm for the grow and shrink properties. You can add/remove children to see how the algorithm calculates the width as the viewport size changes. Hope this is useful!
Sometime last year, I started doing these 24 exercises in TeX/LaTeX -- when I started, my idea was to show how TeX's very simple box-glue-penalty model (its "glue" is like springs with specified stretch and shrink) is yet general enough to do all the many things that Flexbox can do. I never got around to finishing it, and in the process I realized that much of what Flexbox focuses on are purely user-conveniences (e.g. allowing the user to specify "boxes" in a different order), and some of it (e.g. vertical typesetting) is actually nontrivial with TeX, though doable (and used by many in practice, wrapped into packages, which I was hoping not to use).
So my project is abandoned for now and the existing document is in a very unpolished state, but in the meantime if anyone is interested, take a look -- (it has spoilers for the CSS exercises, and most of it only makes sense if you look at the (La)TeX source code, of which I'm definitely not an expert): https://www.overleaf.com/read/ssmrvhpwrmpn
This and Grid Garden have been around for a while and seem to come up at least once a year. Great resources no doubt, always fun! The best past threads from both ->
I had my entire team of FE engs take this when it came out! It’s really a lovely tool and it helped a lot of our folks grok how to start transitioning to a flex model.
Flexbox Froggy is good, but I prefer Flexbox Zombies. It's got a better hint system, better graphics, and a story. https://mastery.games/flexboxzombies/
Different problems, 1D vs 2D. There's some overlap, but they attack the problem from different directions. Flex child elements determine their own size, while the parent grid determines the size of the child grid elements.
There’s a lot of overlap between the two, but there are also various problems that one can solve that the other can’t. Grid is 2D with limited 1D-like auto placement, whereas Flex is 1D with limited 2D-like wrapping.
I was forced into frontend development a few years due to a priority shift at my company (I was a backend dev) and these tools were extremely helpful. I highly recommend them to anyone getting into frontend development.
I got thrown into an existing application. The best way to learn React was really just to work inside an existing code base so you can see existing patterns.
Honestly, the thing that made me “grok” flexbox, and actually start thinking in it, was figma’s auto layout.
As a dev from the 2000s, I had tables and floats seared into my mind. Any design problem layout problem boiled down to that, and I just used flexbox to make it easier.
But figma … that thing made me actually _think_ in responsive layouts. Not sure how they’ve implemented it, but auto layout just feels like an “interface to flexbox”. After a couple of projects, in my mind now everything is just auto layouts, and thus I’m now defaulting to using flexbox everywhere. Only more exotic design issues now need something different.
I've found that interactive tutorials/courses, like those that KataCoda seems to offer are a pretty interesting approach: https://www.katacoda.com/ (someone once linked one of their Kubernetes courses, it was pretty nice; seems to be locked behind a signup now)
On a slightly unrelated note, i think that it's also important to figure out what to learn in the first place. Therefore, i think that this site is pretty useful for seeing some of the common technologies or practices: https://roadmap.sh/
There are many more games apart from the Flexbox and Grid ones from this creator[1].
CryptoZombies[2] is often the recommended start for anyone wanting to learn Ethereum's Solidity and associated front-end library. It's not as gamified though.
Would love to see a tailwind version of this. As I know the class names and what the properties do, I just forget the syntax without the help of an IDE.
32 comments
[ 6.7 ms ] story [ 86.9 ms ] threadThanks!
I spent hours on this game when I was working in web dev and had a project using flexbox.
So my project is abandoned for now and the existing document is in a very unpolished state, but in the meantime if anyone is interested, take a look -- (it has spoilers for the CSS exercises, and most of it only makes sense if you look at the (La)TeX source code, of which I'm definitely not an expert): https://www.overleaf.com/read/ssmrvhpwrmpn
Froggy
https://news.ycombinator.com/item?id=10652909
Garden
https://news.ycombinator.com/item?id=18753358
https://news.ycombinator.com/item?id=14041367
- Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Grids - https://css-tricks.com/snippets/css/complete-guide-grid/
As a dev from the 2000s, I had tables and floats seared into my mind. Any design problem layout problem boiled down to that, and I just used flexbox to make it easier.
But figma … that thing made me actually _think_ in responsive layouts. Not sure how they’ve implemented it, but auto layout just feels like an “interface to flexbox”. After a couple of projects, in my mind now everything is just auto layouts, and thus I’m now defaulting to using flexbox everywhere. Only more exotic design issues now need something different.
There was a site that also helps you learn Git in a really nice visual way: https://learngitbranching.js.org/
On a slightly unrelated note, i think that it's also important to figure out what to learn in the first place. Therefore, i think that this site is pretty useful for seeing some of the common technologies or practices: https://roadmap.sh/
CryptoZombies[2] is often the recommended start for anyone wanting to learn Ethereum's Solidity and associated front-end library. It's not as gamified though.
[1]: https://codepip.com/
[2]: https://cryptozombies.io/en/course/