What Mastering Flexbox Will Do For You

As I prepared my first Mastery Game - Flexbox Zombies - 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. 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 a lot of these problems. Once you have flexbox down it's absolutely amazing. There's a reason why people love it. Here is what mastering flexbox will do for you personally:

Prototype Faster

When you know flexbox like the back of your hand, you can quickly and effortlessly whip up a ton of layout ideas that 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 a lot of your layout needs and you can prototype new and creative layouts so much faster.

Center Anything

Centering in CSS amiright?! Centering 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;
}

But what does line-height have to do with centering? Who knows - that's just the hack we're used to.

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 anyway. But what does margin have to do with centering? And now you can't use the margin property when you actually need it... so instead you hack in some extra padding plus relative positioning to get it back where you wanted it and...

Nope.

Flexbox was made for this.

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 and padding available for spacing if you need.

It even works if you have multiple children elements or 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 effect of floating text around images that 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 writing new code.

Trying to modify or extend a layout you don't fully understand is the worst. You take your best guess and pray it doesn't break something else in the app. That's no way to live. Once you master Flexbox, anytime you run into existing flexbox in your project you'll be able to make perfect sense of it and make your changes quickly. No more nightmares of CSS Jira bugs.

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 dependency 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, and flex-basis all in one.

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 though and you'll no longer need the crutch.

My Flexbox Zombies Mastery Game explains these properties (and more) all in an unforgettable way, and eases you into spaced repetition challenges so it all becomes second nature.

Build Responsive Apps

Flexbox is also great for building responsive layouts. Though arguably CSS Grid is a better fit. With Flexbox, parts of the UI can 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 a bunch of production projects in Flexbox now and haven't encountered a single issue. There are some rare 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. Flexbox works great.

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

Be In Demand

People who can build great UIs that work well and are cleanly coded are in crazy high demand. In the Salt Lake Valley where I live companies simply can't hire enough frontend devs. The demand is huge, especially if you're good.

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 that no longer apply. You 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 become a formidable UI developer yourself.