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 -><p>Froggy<p><a href="https://news.ycombinator.com/item?id=10652909" rel="nofollow">https://news.ycombinator.com/item?id=10652909</a><p>Garden<p><a href="https://news.ycombinator.com/item?id=18753358" rel="nofollow">https://news.ycombinator.com/item?id=18753358</a><p><a href="https://news.ycombinator.com/item?id=14041367" rel="nofollow">https://news.ycombinator.com/item?id=14041367</a>
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).<p>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): <a href="https://www.overleaf.com/read/ssmrvhpwrmpn" rel="nofollow">https://www.overleaf.com/read/ssmrvhpwrmpn</a>
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?
Honestly, the thing that made me “grok” flexbox, and actually start thinking in it, was figma’s auto layout.<p>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.<p>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.
Also highly recommend the sibling game Grid Garden for working with CSS grid layout: <a href="https://cssgridgarden.com/" rel="nofollow">https://cssgridgarden.com/</a>
For those already familiar with CSS, <i>Css Tricks</i> also has very useful guides on:<p>- Flexbox - <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a><p>- Grids - <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" rel="nofollow">https://css-tricks.com/snippets/css/complete-guide-grid/</a>
Honestly gonna try this out because I've been rewriting my personal website in plain HTML/CSS and I have a bit of trouble positioning things.<p>Thanks!
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.
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.
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.
Flexbox Froggy is good, but I prefer Flexbox Zombies. It's got a better hint system, better graphics, and a story. <a href="https://mastery.games/flexboxzombies/" rel="nofollow">https://mastery.games/flexboxzombies/</a>