Equal Height Boxes with Flexbox

For the uninitiated, flexbox can be used pretty much everywhere these days. That is assuming you’ve stopped supporting IE9 and below. (#protip You should stop). Can I Use shows just how well supported it is.

When I was freelancing, one thing I’d need to do quite often is make equal height boxes, that fit into and conform to a grid nicely. I used to use JavaScript for this, but using JS for layout sucks more balls than [insert last weeks celebrity].

This is where flexbox comes in. Yes, you could use tables, but they suck too.

Flexbox is made for situations like this. Take a look at the example below. The code is exactly what I use for the Projects page here, but I have omitted the many prefixed properties for brevity.

See the example on Codepen.