React应用中-webkit-flex-direction属性浏览器不展示问题咨询

核心原因 #

你遇到的问题是Create React App（CRA）内置的Autoprefixer工具的规则导致的：

• CRA默认集成了Autoprefixer来自动处理CSS前缀的补全和冗余属性移除，你手写的-webkit-flex-direction被判定为不需要的冗余属性，在构建/编译阶段被直接剔除了。
• 其余-webkit-前缀的flex属性能正常生效，是因为旧版本Autoprefixer对不同flex相关属性的前缀判定逻辑存在差异，没有把这些属性判定为冗余。
• 非React项目中能生效是因为没有引入Autoprefixer的自动前缀处理逻辑，手写的属性不会被移除。

解决方案 #

你可以任选以下任意一种方式修复：

• 调整项目根目录package.json中的browserslist配置，把你需要兼容的低版本webkit内核设备加入兼容列表，例如需要兼容iOS 9及以下设备的话，添加ios >= 8到browserslist的开发、生产配置项中。之后删除你手写的-webkit-flex-direction，只保留标准的flex-direction属性即可，Autoprefixer会自动根据兼容配置补全对应的前缀，不会被移除。
• 如果一定要手动写前缀属性，可以在手写的-webkit-flex-direction属性后添加注释/* autoprefixer: ignore next */，强制Autoprefixer跳过对该属性的处理，避免被删除。
• 如果是在React内联样式中写该属性，需要把属性名改为大写开头的驼峰格式WebkitFlexDirection，React才能正确识别私有前缀属性。

内容的提问来源于stack exchange，提问作者Pinya