Fun with Flexbox

In the course of the past few days I have discovered parts of CSS that I never knew existed, but have often wished did in some form or another. Amongst these is the calc() function which lets you calculate values for properties, such as calc(100% - 3em).

The one I’m most excited about for the moment is Flexbox or the Flexible Box Layout Model. I first discovered this from Paul Irish, on his flexbox tutorial over on html5rocks.com however as warned I soon discovered the issues with the changing spec of flexbox and the many versions implemented (or not implemented) by different browsers.

The issue is as browsers implement moving specification and then it changes drastically so much to break everything. So now there exists the 2009 spec (display: box) which is in quite a few browsers, some mixed up 2011 stuff from a transitionary period which doesn’t exist in browsers but is scattered across the internet in various guides as ‘how to use the new flexbox’ (display: flexbox) and lastly the current implementation (at time of writing) which is implemented (at least partially) in all modern browsers.

From what I can see there don’t seem to be many guides (if any) that cover the current specification. So mostly for my benefit in any future working with flexible box layout here’s my quick summary of flexbox, I hope it helps anyone else who happens to stumble across my blog.

Syntax

The css properties you need are:

For making this all work in Chrome (and other webkits - though they are not fully compatible yet) the -webkit- prefix needs to be added to all the properties, other than display which needs it added to the value ie. display: -webkit-flex;

And then I got to firefox which ‘supports’ it. Or rather it will support it in version 20 (stable at time of writing is 17, Dev/Aurora is 19). In 18 and 19 it can be enabled by changing the flag layout.css.flexbox.enabled to true and even then only single line is supported.

Making my layout

So the project I’m working on that brought this flexboxing all about needs a header/footer with left, right & centre, and centred content that always stays in those relative positions no matter what the display size is. This is why flexbox is ideal in my situation, however I would say building an entire website structure from flexbox for the majority of applications is probably not a good idea. The best layout model is probably CSS Grid, however as no browser has got round to implementing it yet, that wil have to wait.

My standard method for doing such a layout would be floats, however I wanted to give this a go. So taking my code:

I made my CSS:

My flex-flow and flex lines are a bit extraneous, but particularly whilst I’m developing I like to set things manually do I know what’s going on. Also using flex means that each flex item fills out its space, rather than just sitting in position.

This works for creating the header and footer how I want them, but to get the main content right in the middle more work needed to be done. Time to add a wrapper div (OH no!) as unfortunately you get some weird things happening if you try to use the body as a flex item container. Actually having just done it, you can use the body to wrap flex items, so all is good =) My page structure has <header> <section> <footer> so each of those becomes a flex item in its own right, this time vertically in a column and the section element gets aligned centrally. My full css is:

with .vbox and #display applied to the body for this page layout.

And that’s about all for now, coming soon: WebSockets