14 DAY TRIAL // CSS3 is a heaven-sent for web designers as it finally implements some of the things they've been needing for years. By now, CSS3 is fairly well supported and some of the earlier additions are quite trivial at this point.
But one feature that is still in the works may be one of the best tools for web app developers to date, the flexbox.
As the name suggests, the flexbox is a (relatively) new way of creating web page layouts, designed around "boxes" which are, well "flexible."
"Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns," the draft W3C spec describes.
"In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need," the draft W3C spec describes.
The flexbox has been around for a couple of years now, in experimental form, but it has more recently gotten a revamp, the flexbox 2.0 if you will.
This latest draft spec is supported by Chrome 21 and above. The first version of the would-be standard was supported by earlier versions of Chrome, Firefox and Safari.
Now, Firefox 18 Nightly added support for the "flex" version of the standard as well. The latest specs replace the most of the occurrences of "box" with "flex," hence the name.
Support is not enabled by default, you'll have to enable the "layout.css.flexbox.enabled" preference in about:config, but it's a step in the right direction.
Internet Explorer 10 has support for the older implementation as well. Since it's already supported by WebKit, seeing how it works in Chrome, it should make its way into Safari sooner rather than later. Opera is always a strong supporter of standards, so it should be coming there as well.