Hi guys,
My question is simply what prefixes to use for flexbox. I’ve had a good look around but I can’t find anything conclusive. Most articles seem to cover, -webkit and that’s about it. In principle, as with most other css declarations, it should just be a case of duplications and adding -webkit-, -moz-, -ms-, -o- in front of each line but it doesn’t seem that straight forward?
For example to set display: flex, to be backwards compatible you need this…
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
So each property is different, -box, -flexbox, flex. This seems to extend to some other properties, order for example where you have -ordinal-group and order:
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
And align-items, where you have to use box-align, flex-align as well:
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
What rules to people follow when it comes to this, do people drop some of the prefixes as support is so minimal? Normally you can just add the browser prefixes in front of the same duplicated line to be safe but it doesn’t look like this is possible with Flex due to all the different variations?
I can’t find a website with a thorough list of all the prefixes …do people, generally, not bother?!
Hope people can shed some light on this, cheers!
