The CSS3 Flexible Box Layout (flexbox)

In Flexible height vertical centering with CSS beyond IE7 I mentioned that you can use the properties from the CSS3 Flexible Box Layout Module—flexbox—to center an element horizontally and vertically.

I’ll show how to do this along with some other examples of what you can do with flexbox. But first of all a couple of—rather big—caveats, to make you aware of them upfront:

Flexbox is currently only supported natively by Gecko (Firefox) and WebKit (Safari, Chrome) browsers. For Opera and IE you can try Flexie, a JavaScript workaround. I’ve only had a quick look at it and can’t say how well it works.
The flexible box layout specification will change to use other property names among other things. See Differences in Flexbox drafts and the Editor’s draft of the Flexible Box Layout Module for details. In other words what you see here will not be the exact way to do flexible box layouts in the future.

Flexbox basics

As you might guess from its name, the flexible box layout gives us a way of creating flexible boxes. It lets us align and distribute boxes vertically and horizontally as well as have boxes flex to use all available space (yep, quite similar to how tables behave). You can also display the elements in reverse order compared to how they are ordered in the markup, though that is a feature to be used with care since Source order and display order should match.

I’ve made a quick flexible box layout demo page to show just a few things you can do (view source to see the CSS for the different examples). While preparing this demo page I noticed that while the WebKit implementation seems pretty stable, there are some issues with Firefox. Some of these are mentioned by Oli Studholme in CSS3 Flexbox vs A Princess Bride, but I also noticed the following:

Firefox doesn’t seem to support the justify value for box-pack and box-align
Firefox seems to use border-box instead of content-box for box-sizing when calculating child widths, making children with paddings or borders narrower than in WebKit browsers. It’s odd because when using Firebug to inspect a flexbox child, -moz-box-sizing is reported as content-box, but the element’s computed width is the specified width minus horizontal paddings and borders.

For further reading about flexible box layout, see the following:

Full-page vertical and horizontal centering

In Flexible height vertical centering with CSS beyond IE7 I described a technique for using display:table to center the whole page both horizontally and vertically. So let’s take a look at how to do that with flexbox instead.

The markup is identical to that in the display:table demo—a div element with an id of body is wrapped around the page content. The CSS looks like this:

html,
body {
	width:100%; /* Needed to avoid a redrawing bug in Firefox when resizing windows */
	height:100%;
}
body {
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	display:-moz-box;
	-moz-box-pack:center;
	-moz-box-align:center;
	display:box;
	box-pack:center;
	box-align:center;
}
#body {
	-webkit-box-flex:1;
	-moz-box-flex:1; /* Needed to make this element flexible in Firefox */
	box-flex:1;
	max-width:50em;
	margin:0 auto;
}

Eight of those lines are there only because browsers don’t yet use the non-prefixed properties (which is a good thing in this particular case since, as I mentioned earlier, the flexbox spec will change). View the Full-page vertical and horizontal centering with Flexible Box Layout demo to see this in action.

Again, this only works in Gecko and WebKit browsers. That said, the lack of support in Opera and IE fortunately doesn’t mean pages centered with this technique blow up spectacularly in those browsers. All that happens is that the content isn’t centered vertically. Sometimes that may be a showstopper, sometimes it’s an acceptable use of progressive enhancement. It’s your call.

Use with great care and keep an eye on the specification

Having yet another tool in the toolbox is good. This particular tool should be used with extra care because of the limited and partly buggy browser support and because of the coming changes to the specification.

If you’re building something for a specific rendering engine (browser extensions and WebKit-specific mobile sites come to mind), a target audience dominated by the supporting browsers, or for non-essential visual effects, I think flexible box layout can be put to good use if you manage to avoid triggering any of the bugs.

Posted on March 22, 2011 in CSS