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/ ...

Get Responsive Web Design with HTML5 and CSS3 - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.