Introducing Flexbox
Flexbox addresses the shortfalls in each of the aforementioned display mechanisms. Here's a brief overview of its super powers:
- It can easily vertically center contents
- It can change the visual order of elements
- It can automatically space and align elements within a box, automatically assigning available space between them
- It can make you look 10 years younger (probably not, but in low numbers of empirical tests (me) it has been proven to reduce stress)
The bumpy path to Flexbox
Flexbox has been through a few major iterations before arriving at the relatively stable version we have today. For example, consider the changes from the 2009 version (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/), the 2011 version (http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/), and the 2014 version we are basing our examples on (http://www.w3.org/TR/css-flexbox-1/). The syntax differences are marked.
These differing specifications mean there are three major implementation versions...
