CSS3 Flexible Layouts ‘Flexbox’ Spec Nears Final at W3C

From the ‘Table Memories’ files:

Back in the old days, when I built sites with tables  (we didn’t have this fancy CSS stuff in the 90’s), I would commonly build flexible table layouts that would scale to a certain percentage of a screen size. In the table model, that was easy and we all did it.

CSS with it’s awesome abilities, is also more complicated in a lot of was due to an overwhelming number of choices. One of them is the new CSS3 Flexbox, officially known as the CSS Flexible Box Layout Module. It’s a specification that has undergone significant change over its development but is no nearing the finish line.

The near final working draft was published on Tuesday and is the Last Call Working Draft. The deadline for comments is 3 July 2012.

So, what is this magic flexbox spec? According to the abstract:

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Yes this is more precise that table percentage control of the web 1.0 era, but the general idea isn’t all that different. Flexible layout and ‘flexbox’ control is more essential today then ever before as we have more diversity in display sizes. In the table era it was 640×480, 800×600 and maybe 1024×768. In the modern CSS era, anything goes, and on mobile, tablet screens, flexibility is equally important.

Mozilla, Google and Microsoft all have named editors on the Flexbox spec and there is some support in Chrome, Firefox and IE10 already. I strongly suspect that with this spec being finalized by the end of the summer, it will be broadly supported on all browsers by the end of the year.