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 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:

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