Messing with flexbox

20 Mar 2014

I finally had a chance to experiment with flexbox, a fancy new “coming soon” feature for CSS. Browser is support is getting close.

Chris Coyer has good write up of all the features: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

It’s a fantastic system which is going to solve a lot of layout problems.

Anyway, what I was trying to achieve was a layout with two fixed width columns, and a third fluid which fills the remaining space. Normally I would have done this by absolutely positioning the ‘fluid’ element.

This seemed to be something flexbox was built for, but the answer wasn’t obvious.

The property I was after was flex-grow, which defaults to 0, meaning that the element will not grow to fill. By changing this to 1 on a specific element, that element will then grow to fill the remaining space, with a 1:1 size ratio with all other elements with the same value.

If I change this to 2, then it’ll grow to be twice the size of any element with a value of 1. Anything 0 remains at whatever it’s fixed size is.

See the Pen Flexbox fixed+fluid by Matt Dwen (@mattdwen) on CodePen.