Hacker News Reader

Comment by Bahamut | Hacker News Reader

I always viewed https://css-tricks.com/snippets/css/a-guide-to-flexbox/ as the definitive flexbox resource, and https://github.com/philipwalton/flexbugs for browser specific issues

View on HN

While CSS Tricks certainly is a lot more thorough, I've always found the "throw stuff at the wall" ordering of content (a la Pinterest) to be confusing for things where I probably need to find something specific, or want to read things in order. I think that's where this resource can come in handy.

and https://flexboxfroggy.com/ for fun.

FYI: I get an invalid certificate warning. Looks like it's presenting the github wildcard certificate, rather than a certificate with your domain in.

Thanks but not my site.

There's also this slightly more visual approach to learning flexbox: https://www.flexboxgame.com/

Whoa, that was much more effective than I thought it was going to be. The first impression from the tool sidebar is overwhelming, but patterns quickly emerge and you can pick up speed fast.

It's very satisfying to see layouts "just work" through the application of one or two simple but descriptive commands.

Same. Separating the container from the items makes it easier to grok. A lot of the browser bugs arise in deeply nested containers, so judicious use has saved a lot of legacy design headache and still allowed me to roll it out with very good support on desktop and mobile.

Thanks for this. I haven't kept up to date on my CSS. Great to know flexbox is fully supported across the board now.

Reply on news.ycombinator.com