📝 CSS-Tricks 225: Learning Things You’ve Been Avoiding

View this newsletter on the web.

[Robin]: One time I was interviewing someone for a UI engineering gig and noticed something interesting. We were building a UI that involved flexbox and the person opened up DevTools and started clicking up and down in the list of values available to them. And I shortly realized that this person understood that it was this property that would solve the problem, but they didn’t quite understand what combination of properties and values to use for the right solution.

Now, we shouldn’t ever mock someone for not knowing something — especially when it comes to the ever-changing and evolving field of web development — but what we can’t really forgive ourselves for is refusing to learn something out of stubbornness or embarrassment.

That was me a couple of weeks ago when it came to the flex CSS property. Out of pure stubbornness I refused to learn how it worked, and whenever I was confronted with something like this…

.parent { display: flex; } .child { flex: 0 1 auto; }

…I would find some way to fix the problem without flex. I mean, it looks so weird! I tend to hate CSS shorthands anyway, but I would see this everywhere. Why is that? Why do people keep writing code I don’t understand? Ugh!

And yet, dangit, I still refused to learn.

But after sitting down and writing out how each property works, things sort of clicked: the flex property tells the child element of a flex parent how to expand and shrink. That’s not scary at all! We can think of it like this:

/* This is just how I think about the rule above in my head */ .child { flex: [flex-grow] [flex-shrink] [flex-basis]; } /* or... */ .child { flex: [max] [min] [ideal size]; }

Somehow, translating it into “max, min, and ideal size” made it all make sense for me.

Anyway, understanding flex (as well as flex-grow, flex-shrink, and flex-basis) is important if we want to build modern UIs on the web today. But I guess my real point here is that the thing we’ve been avoiding learning about usually isn’t really as scary as we initially think.

And sitting down, being patient with ourselves is the best way to learn something new. Even if it is a little embarrassing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s