Multi-line flexbox support in Nightly and Aurora 28

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:

Similarly, it allows authors to create homescreen layouts with app icons and flexible widgets that wrap to fill the screen:

(Note that the flexible blue widget, labeled "wide", changes its size depending on the available space in its line.)

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 702508, bug 939896, bug 939901, and bug 939905. Thanks to David Baron, Cameron McCormack, and Mats Palmgren for reviewing the patches.

CSS3 Flexbox enabled in nightlies & ready for testing!

This morning, I checked in a patch to enable CSS3 Flexbox support in Mozilla's bleeding-edge nightly builds! So, in a day or two (when that change is merged to mozilla-central), our Nightly builds will support CSS3 Flexbox.

This is the new CSS Flexbox model -- using "display: flex", as opposed to the older "display: -moz-box" model. Also, in the spirit of avoiding vendor prefixes for experimental features, we'll be shipping this new flexbox implementation without a vendor prefix in development builds -- hence, "flex" instead of "-moz-flex".  It'll be guarded by a hidden preference ("layout.css.flexbox.enabled") which we can toggle to make it available in release builds, too, once it's been sufficiently tested and had its kinks worked out.

Today's patch simply toggled that hidden preference to "on" in Nightly builds, and that change will be merged to Aurora (Firefox alpha) builds around January 6th, the next merge day.  With some luck, this may continue to "ride the release trains" and be released as part of Firefox 20, but we'll evaluate its readiness when Firefox 20 is merged to the Beta channel and may toggle it off at that point (though anyone wishing to test flexbox would still be able to toggle the pref on for themselves).

So: please go forth and test the new flexbox support in nightlies, and file bugs for any issues you encounter! Eiji Kitamura's "CSS Flexbox Please" demo page is a fun place to start.

A few known issues:

• When printed, flex containers currently get truncated at page-boundaries (though I'm actively working on fixing that).
• The "order" property doesn't yet affect paint-order/layering (though it does control positioning) -- I've got a patch in hand that fixes this -- it's just awaiting review, and it'll hopefully land soon.
• The line-wrapping "multi-line" version of flexbox is not yet implemented. (That's the "flex-wrap" property and the shorthand "flex-flow" properties.) I'll hopefully get to this in the near term, but it's somewhat separate from the core flexbox functionality, so we opted to implement it separately.