CSS3 LAYOUT CHOPS - Practical CSS3: Develop and Design - page 254

USING FLEXBOX

Flexbox ( www.w3.org/TR/css3-flexbox) is designed to facilitate some complicated
layout techniques involving the spacing and ordering of child containers of a box.
It is actually a new type of box model. To lay out some elements using Flexbox, you
must set their parent container to use the new box model by using a new value of
the display property:

section {
: ;
}

Or if you want your container to be inline, you'd use this:

section {
: ;
}

Now let's get cooking with some examples.

FLEXBOX SYNTAX CHANGES

At the time of this writing, only Chrome Canary supported the new Flexbox syntax shown throughout this
section. And it may well be different again by the time you read it; the spec has undergone a lot of changes
in the time I've been writing this. In fact, I had to rewrite my Flexbox examples four times during the course
of writing this topic—such is the folly of trying to work with nascent specs! In any case, the chapter should
still nicely demonstrate the concepts of Flexbox.
Other modern browsers currently support Flexbox but with an older version of the syntax from 2009. You
can see how the new and old versions of the syntax map at
http://wiki.csswg.org/spec/lexbox-2009-2011-spec-propertymapping.
To s To if v e t h e p r To b if e m To if d if if e r e n t b r To w s e r s s u p p To r t if n g d if if e r e n t v e r s if To n s To if F if e x b To x , if if y To u a r e c To n s if d e r if n g
using Flexbox in a project, for now I'd recommend that you feed browsers the newest syntax by default, and
then feed alternative styles to those that don't support the new syntax using Modernizr.