A few days ago, I checked in support for multi-line flex containers (also known as "multi-line flexbox") in Firefox Nightly. This functionality will be included in the Aurora 28 release that comes out later this week. If all goes well, it will be available in an official release as of Firefox 28, which ships in March.
In prior Firefox versions, we support single-line flex containers, which let authors group elements into a row or a column, which can then grow, shrink, and/or align the elements depending on the available space.
But with multi-line flexbox support, authors can use the flex-wrap CSS property (or the flex-flow shorthand) to permit a flex container's children to wrap into several lines (i.e. rows or columns), with each line able to independently flex and align its children.
This lets authors easily create flexbox-based toolbars whose buttons automatically wrap when they run out of space:
Furthermore, authors can use the align-content property to control how extra space is distributed around the lines. (I don't have a compelling demo for that, but the flexbox spec has a good diagram of how that looks at the bottom of its align-content section.)
The above screenshots are taken from a simple interactive demo page that I whipped up. Follow the link if you want to try it out.
The work here was primarily done in
bug 939901, and
Thanks to David Baron, Cameron McCormack, and Mats Palmgren for reviewing the patches.