Interface patterns using flexbox

Posted on July 21, 2015 by Carl Henderson

As a web developer, I am constantly asked to do the impossible. Or, more accurately, I am asked to do something that seems completely reasonable, but then I find out that CSS makes it nearly impossible to do. I'll start throwing wrapper divs around things, and then inevitably turn to JavaScript and cry myself to sleep at night.

Ever have ideal markup just fall apart?

Ever have ideal markup just fall apart?

Flexbox changes all of that. It doesn't fix every CSS issue, but it certainly fixes enough of the issues that writing CSS is now fun again. Rather than writing another flexbox tutorial, this article will focus on common interface patterns using flexbox. For more general information on flexbox, I highly recommend Chris Coyier's article: A Complete Guide to Flexbox.

Left aligned logo with right aligned navigation

This is one of the most common patterns around. Prior to flexbox, the best way to do this would have been to wrap the right hand side in a wrapper and float it. Flexbox makes it all easy by using the flex-grow property on the logo.

See the Pen QbVpGj by Carl Henderson (@chuckhendo) on CodePen.

Vertically centered text

There have been several methods over the years to vertically center text (see: Centering in the Unknown). These techniques have always felt fairly hacky, and no single technique fit all situations. Vertical centering with flexbox is insanely easy. Just use "align-items: center" on the container to vertically center, and "justify-content: center" to horizontally align.

See the Pen vOzxZb by Carl Henderson (@chuckhendo) on CodePen.

Equal-height columns

This is one of those problems that has eluded front-end developers for years. If you don't know the length of your content ahead of time, equal-height columns have been impossible to achieve without the use of JavaScript. With flexbox it's super simple: Just make the parent container display: flex, and the magic of flexbox will take care of the rest.

See the Pen JdaWOZ by Carl Henderson (@chuckhendo) on CodePen.

Floated image without wrapping text

I can remember one of the first web development problems I had to tackle: An image that could have been any width/height to the left of a content block that could have been any width/height, all inside of a container with an unknown width/height. The kicker was that the text couldn't wrap underneath the image. After hacking away at it for days, I finally gave up and used a table (and I wasn't judged too harshly for it, because it was 2004).

Flexbox makes this pretty easy. We just need to make the container display: flex, and then give the image a width using flex-basis. From there, if we give the text flex-grow of 1, it will expand to take up any space in the container that's not being used by the image. Best of all, it won't wrap underneath the image. No tables required!

See the Pen LVJWQg by Carl Henderson (@chuckhendo) on CodePen.

Browser support

Flexbox is still a relatively new technology, and underwent a significant rewrite a few years ago. Using autoprefixer will handle the minor differences between the spec rewrite, but IE9 and earlier don't support flexbox at all. Flexbox is safe to use today, however, so long as you follow progressive enhancement principles and ensure your site is still usable on older browsers, even if it doesn't look exactly how you want it to.