What is the proper way to order vendor prefixes?

Question

The rub

• CSS Tricks says that the order of the display vendor prefixes for flexbox is important and shows one ordering (-webkit-box, -moz-box, -ms-flexbox, -webkit-flex, flex)
• MDN shows a different order than CSS Tricks and swaps -moz-box out for -moz-flex (-webkit-box, -webkit-flex, -moz-flex, -ms-flexbox, flex)
• Bourbon shows yet a different order and brings in box, which the other two pages don't even mention (-webkit-box, -moz-box, box, -webkit-flex, -moz-flex, -ms-flexbox, flex)

The questions

• Is order really important?
• What is the correct way to do this?

Answer 1

As long as the W3C version (the official property) comes last, there is no difference.

The CSS rendering engine will always pick the last property that applies. Hence, you don't want Chrome, for example, to skip over flex and pick -webkit-flex, if flex is actually supported.

You're seeing variations in the ordering of vendor prefixes in CSS-Tricks, MDN and Bourbon because the order doesn't matter. Just note what they all have in common: flex is last.

Here are some more details:

• Ordering CSS3 Properties
• Ordering of vendor-specific CSS declarations

Answer 2

Mostly, the order of the vendor prefixes aren't that important, but be sure that you are using the most standarized version by add the one without the vendor prefix (just flex) at the end. The CSS always prioritize the last if the properties are equal.

Anyway, the flex without prefixing is now supported by the most common browsers: http://caniuse.com/#feat=flexbox. 96% of the browsers can use flexbox, and 82% of them do support flex without prefixing.