Equal Heights with Flexbox

I’ve been playing with flexbox for a while. I love it. It’s going to save so many kittens.

I’m madly in love with CSS. You probably figured that out by now. But I’m tired of hacks for simple layouting issues. Or using JS for simple layouting issues. I’ll bet you are too.

Flexbox will save us with
- equal height columns
- vertical centering
- source order independence
- super-cool properties like the justify-content: space-between property (more on that later)
- boxes can shrink, grow and be manipulated in all 4 directions

Do note, that as an alternative/complementary layouting system to Flexbox, there's an independent CSS Grids spec available as a Working Draft which seems really promising. However, it's still in early stages and only available on IE 10, with vendor prefixes. Worth keeping an eye on.

This is going to be the first of a series of demos of what flexbox is capable of. I'm beginning with one of the most irritating (a.k.a. I-want-to-throttle-your-neck) layouting problems in CSS - the equal height column issue.

If you have equal height boxes with a background colour and margins, that makes things even more complex.

Let's look at a few examples below.

P.S. CodePen is really cool :)

You can play around in the pen with the HTML and CSS. This is a slightly long demo, though...

Note: I'm using the standards, unprefixed spec-happy syntax. This works currently in Chrome, Opera and Firefox (a couple of properties like flex-wrap are not yet fully supported in FF, as of now). So view this post in Chrome or Opera.