Coping with Flexbox
When you feel a lack of confidence or speed with of a tool you use frequently, it is easy to feel a mixture of frustration and shame.
That suffering might be due to an unmet desire: that you should get fluency but not require training. As a programmer, you might feel that human repetition is a sign that something needs to be built to prevent that repetition. But, if you talk to a teacher, sports coach, martial artist, or anyone else who works in the domain of training meat-based deep neural nets to solve problems quickly and confidently, you'll find this is false. If you are seeking a feeling of speed and confidence, embrace repetition.
Perhaps, play https://flexboxfroggy.com/ 10 times.
When I was learning Flexbox, I've created a graphical cheatsheet [1] (based on another one) that I've printed out and put next to my computer. It helped me a lot back then.
Firefox Inspector has useful visualizations for flexbox containers: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto... And another useful feature that shows indicators why some CSS properties are not working.
Once flexbox understanding kicks-in, it becomes the most efficient way to create layouts by far.
CSS-Tricks also has a more practical guide which has been essential for me: https://css-tricks.com/flex-grow-is-weird/
Getting CSS layout right can be extraordinarily difficult, borderline impossible, absent the right understanding and set of composable primitives.
As someone who's done web development since the late 1990's, I offer my very highest praise and unreserved recommendation for an extraordinarily thorough, coherent and practical resource I only recently discovered: https://every-layout.dev
Its "Axiomatic CSS" is, finally, a standards-based solution that provides a solid foundation for truly responsive layout and design.
Nice guide, thanks for writing it. I can never remember which directions align/justify impact. The best mnemonic I could think of was justified text. When you click the justify button on a text paragraph in a typical word processor, it impacts the text in the same direction as justify-content in flexbox does.
Another guide that I found added clarity around flexbox:
https://internetingishard.com/html-and-css/flexbox/
I think often it is about finding a guide by an author who happens to explain things in the way that clicks with you. For me, this one really helped.
For figuring which flexbox options I want, I always use this: https://cvan.io/flexboxin5/ bit of a flexbox editor/explorer
undefined
Can't wait for you to try CSS Grids
I sympathize with this. Everytime I want to use flexbox, I end up searching and reading and rereading CSStricks' guide. And then experimenting until I get what I am after. One of these days I'll stick...
The explanations are good, but there's quite a gaping hole when you don't include any "flex-*" properties.
I have been messing around with Flexbox quite a bit at work and this will be a super useful reference, thanks!
Good concise article. Is there a tool to create such figures. They look really neat.
Super useful! Thank you so much for this.
This is a super helpful guide! Thanks!