Flexbox based CSS styling with cross browser considerations

Flexbox based layout structure in CSS is a huge step forward in responsive Web Design styling.

A Complete Guide to Flexbox from CSS-Tricks offers very well presented overview of how different Flexbox properties affect on the given elements.

General overview of the current state of browser support is available at Can I Use? - Flexbox.

Desktop browser support:

• Internet Explorer 10 is supporting the 22nd March 2012 version of the specification, behind the -ms prefix
• Internet Explorer 11 has unprefixed support for the 18th September 2012 version of the specification
• Mozilla Firefox prior to 18 had XUL based implementation with -moz-box style, which was following the 23rd July 2009 version of the specification
• Mozilla Firefox from 18 through to 21 was using -moz prefix while supporting the 18th September 2012 of the specification, but was disabled by default
• Mozilla Firefox starting from 22 has been supporting unprefixed 18th September 2012 version of the specification, but flex-wrap appeared only from 28
• Google Chrome from … through to 20 was using the -webkit prefix while supporting the 23rd July 2009 version of the specification
• Google Chrome from 21 through to 28 was using the -webkit prefix while supporting the 18th September 2012 version of the specification
• Google Chrome from 29 supports the 18th September 2012 version of the specification without prefixes
• Apple Safari 1 up to 6 supported the 23rd July 2009 version of the specification with the -webkit prefix
• Apple Safari from 7 is still using the -webkit prefix but with the 18th September 2012 version of the specification

Once a given browser vendor drops the prefix that it might have used, it will still keep supporting the prefixed version, thus preventing of breaking old web sites, but also creating the need to for higher quality CSS.

Example of how to set the element to a Flexbox container:

display: -moz-box; /* 23rd July 2009 */
display: -moz-flex; /* 12th June 2012 */
display: -webkit-box; /* 23rd July 2009 */
display: -webkit-flex; /* 18th September 2012 */
display: -ms-flexbox; /* 22nd March 2012 */
display: flex; /* 18th September 2012 */

The order of the properties should be so that the oldest of the vendor prefixed is on top, while the latest standard is on the bottom. This way the browser will use the bottom most that it can understand.

Please note that by changing the order of the two -webkit prefixed properties, for example Safari 7 will use the latter. Mixing the order might result in broken and unexpected behaviour, thus is crucial to keep properties listed in correct order.

A collection of property and value names that are somewhat equivalent, are described at Flexbox / Flexible Box Layout CSS Reference. Also the Property index of the Candidate Recommendation is worth checking when working with Flexbox styles.

So in 2009 the properties were named around box, in early 2012 around flexbox, and finally in Summer 2012 in flex.