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:

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.