Flexbox is the thing that unicorns and rainbows are made of. It’s glorious, it’s simple, and you can use it today. Here are some thoughts on how.

A Bit of a History

Responsive design has been around for a while now. It’s been more than a few years since Ethan’s groundbreaking article on the topic, and since then it’s done nothing but grow. There’s plenty of debate around this topic, but I think it’s safe to assume that over 10% of top websites are now responsive.

And hey friend, in case you don’t realize this, that’s a big stinking deal. Four years ago the web on a small screen was awful. Today it’s 10% less awful.

It gets better too. Not only are 10% of websites responsive, but plenty of places now have dedicated mobile sites. And it’s easier than ever to add one to your site (out-of-the-box mobile sites are usually better than nothing).

...but don't get too excited,

here comes the shoe. Responsive design is hard. Like pull-your-fingernails-out-of-their-sockets hard. Sure we have floats, and we can use table layouts in CSS, and inline-block helped things along too. Media queries, max-width and min-width, micro clearfixes, pseudo elements, all of these things that we use every day to make our layouts shine work.

Here’s a hint for you: all of those things just amount to one massive hack. Every single website you’ve ever used is just a collection of hacks, and sometimes that works. Other times it doesn't. But it’s the best we can do.

Or it was the best we can do. Now we have Flexbox.

What Flexbox Brings to the Table

Flexbox was designed for layouts. It was born and bred for it. And not only that, but it was designed for flexible layouts. This is vital to understand, so I'll state it twice: we don't need to use media queries for everything anymore.

We don't need media queries for everything anymore. ~Timothy Miller

Let me give you a simple example to apply. Here's a basic website layout:

Go ahead and click through to that pen and resize it a bit. Don't worry, I'll wait.

You'll notice something interesting if you shrink it enough: that sidebar jumps down below the main content, and there are no media queries.

Pretty weird, huh? This brings me to a little concept I call content-based design.

Content-Based Design

It's a simple enough concept, but until Flexbox came was very difficult to do. Basically you give all of your containers a pixel value, and that pixel value is the minimum that you can shrink that content before things start to break. The container will shrink until it hits that width, and then it will jump down to a point where it can get more space. It's the basic building block for RWD, but now we can do it on a block-per-block basis instead of media queries. Isn't that fantastic?

How Does it Work?

It's made possible by one attribute from flexbox:

  .thingey {
    flex: 1 1 300px;
}

Looks simple enough, right? Let's break that down a bit. The flex attribute takes three values, individually they're called flex-grow, flex-shrink, and flex-basis. Here's what each of those does:

  • flex-grow: the amount that this container should grow, relative to all the other containers.
  • flex-shrink: the amount that this container can shrink, also relative to all other containers.
  • flex-basis: I like to think of this one like min-width. It's more complex than that, but that's basically how I use it in the example above.

Don't worry if you don't quite understand those values yet; it took me a lot of playing with them before I got a good handle on them. The one you should focus on is the last one, flex-basis. I mentioned that it's kind of like min-width, and that's true. It's also what makes content-based design possible.

Wrapping Up

This is only a tiny piece of Flexbox that I've shown you. There's so much more to show, but hopefully this is a good starting point. I'm really excited about content based design, it allows for a much more modular stylesheet, and I can't wait to start using it in production.

And a hint: we'll probably be able to do that much sooner than you think.

I know, I know. Shameless teaser


8,049 1 29