How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

Tags: css,flexbox

Problem :

If I have properties that are supported by browser with various prefixes, how I should to write the CSS?

Example:

#example {
    display: flex;  
    align-items: center;                    
    justify-content: space-around;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: space-around;
    display: -ms-flex;
    -ms-align-items:center;
    -ms-justify-content: space-around;
}   

Or in this way ?

#example {
    display: flex;
    display: -webkit-flex;          
    display: -ms-flex;
    align-items: center;
    -webkit-align-items: center;
    -ms-align-items:center;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
}       

Or maybe there is not an order ?

---

Solution :

I would recommend you to use an online (or natively) tool that will automagically add the css prefixes for all browsers.

• http://pleeease.io/play/
• https://autoprefixer.github.io/

If you are using a build system like gulp or grunt, they have plugins that can automatically do this for you.