level up some UI chops

What Mastering Flexbox Will Do For You

As I prepared my first story course on Flexbox for final release, one of my readers emailed asking:

What will I get out of mastering flexbox?

I spend a lot of hours each week thinking about my UI developer audience: what they struggle with and how I can help them. I see so much pain and frustration from smart people just trying to build great layouts. CSS has had a rough history with a ton of quirks. The good people on the CSS committee (w3c) designed flexbox as the solution to these problems. Once you have flexbox down it’s absolutely amazing. There’s a reason why people rave about it. Here is what mastering flexbox will do for you:

magic of mastering flexbox

Prototype Faster

When you know flexbox like the back of your hand, you can quickly and effortlessly whip up pretty much any layout idea you want to prototype. You no longer have to be jealous of how easy it is for your designer who gets to just drag things around in Sketch.

You can quickly see how your UI looks with three even columns, or two fixed side columns and a flexible center. You can see how it looks having a component’s children dock to the top center, or to the right and left sides with even space between.

Your imagination will no longer be hamstrung. Once you master flexbox you’ll find it handles most of your layout needs and you can prototype new and creative layouts so much faster.

Center Anything

Centering in CSS right?! This is probably the least intuitive thing even experienced devs still have a hard time with.

For single lines of text maybe you currently use the “matching line-height trick”:

.center{
  height: 40px;
  line-height: 40px;
}

What does line-height have to do with centering? Who knows but it’s how we do it.

For components that only have a single child with a known width maybe you currently use the “margin trick”:

.center{
  margin: 0 auto;
}

Hey it works in some cases! But what does margin have to do with centering? And now you can’t use margin for anything else but you need something so you hack in some extra padding plus relative positioning to get it back where you wanted it and…

Nope.

Flexbox was made for this (and other layouts).

parent{
  display: flex;
  justify-content: center;
  align-items: center;
}

Boom. All the children elements are justified horizontally and aligned vertically so as to land perfectly in the center every time. And you still have margin to use for spacing if you need. It even works if the child elements are larger than the parent!

Forget About Floats

We used to have to use floats to accomplish basic layouts. Floats come with a lot of complexity and limitations. You have a tight coupling between floated elements and their next sibling element that needs a “clearfix”. Or you have to use the “overlow: visible” hack, but what if you actually need to hide or scroll the overflow? Well then you’ve got to add a new containing element just for that. Compared to flexbox, floats are just not worth it for what you get. It’s like pasta in my opinion (I don’t like pasta). If stuff doesn’t taste good it should at least be healthy for you right? If it’s neither what’s the point?

Flexbox makes floats obsolete, with just one exception: that 90’s floating text around images effect you’ll probably (hopefully) never be asked to use again.

Understand Others’ Code

Writing new code is more fun than maintaining legacy code, hands down. But if we’re being realistic most of us spend more of our time working with legacy code than with greenfield.

Trying to modify or extend a layout you don’t fully understand is the pits. You take your best guess and pray it doesn’t break something else in the app. That’s no way to live. The next time you run across existing flexbox in your project you’ll be able to make perfect sense of it and make your changes quickly.

Drop the Cheat Sheet Crutch

If you’ve got a flexbox reference site set to your browser’s homepage you might have a problem :) Cheat sheets and references are just a crutch. They’re nice when you’re in a pinch and still have absolutely no idea what you’re doing, but you’re not doing yourself any favors with your dependence on them.

It’s true that flexbox has a lot of properties that seem confusing at first. Like when to use flex-basis vs width. Or that the flex shorthand really means flex-grow, flex-shrink, flex-basis.

Cheat sheets aren’t designed to give you skills, they’re designed to be there for you when you don’t have the skills yet. Gain the skills and you’ll no longer need the crutch.

My free Flexbox Zombies course explains these all in an unforgettable way, and eases you into spaced repetition challanges so it all becomes second nature.

Build Responsive Apps

Flexbox also excells for building responsive layouts. Parts of the UI grow and shrink based on the constraints of the device. Adapting to media queries you can change the entire flow of your UI from horizontal to vertical with a single flex-direction property.

Flexbox isn’t just for the web these days. You can target native mobile, native desktop, and even Virtual Reality (using React VR).

Single Layout for All Browsers

It’s funny, often when talking to devs about flexbox they bring up concerns about cross-browser issues that they heard someone encountered once. I’ve built six production projects in flexbox now and haven’t encountered a single issue. There are some bugs that exist, mainly in older versions of IE and older Safari. But for the most part you can build using flexbox and things just work everywhere. I don’t mess with fallbacks or any of that craziness. It works great.

Can I Use? Data on support for the this feature across the major browsers from caniuse.com.

Be Up to Date and In Demand

People who can build great UIs that work well and are cleanly coded are in high demand. If you’ve never considered yourself a CSS wizard you’re in luck: by mastering flexbox now you’re skipping a whole era of wacky tricks and quirks and can be up to date - and highly marketable - in no time.

Have Confidence You’re Doing it Right

Once you master flexbox you’ll no longer need to use a CSS framework to feel like you’re doing a good job. That confidence in your own ability to build something great from scratch is incredibly rewarding. Not just because it saves you time, but because you can be super proud of what you create. Remember that feeling that first got you hooked on building UIs? It’s time to get it back. I look forward to seeing you gain mastery over flexbox and experience these benefits yourself.

Dead Tired of Looking up Flexbox?

Flexbox is incredibly powerful. But it's also crazy hard to master. So we all end up depending on a cheat sheet and guessing in the dev tools. Enough of that! Time to master it once and for all, in a way that actually sticks, so you can build any layout you can imagine with flexbox.