如果具有相同的属性但具有不同的浏览器支持前缀，如何正确编写CSS？

Question

如果我的浏览器支持具有各种前缀的属性，我应该如何编写CSS？

示例：

#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;
}   

还是这样？

#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;
}       

或者可能没有订单？

Answer 1

我建议您使用在线（或原生）工具，为所有浏览器自动添加css前缀。

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

如果您使用的是像gulp或grunt这样的构建系统，那么它们的插件可以自动为您执行此操作。