Flexbox：Autoprefixer 添加了一个破坏 Safari 的 css 属性答案

【问题标题】：Flexbox: Autoprefixer adding a css property that is breaking SafariFlexbox：Autoprefixer 添加了一个破坏 Safari 的 css 属性
【发布时间】：2015-09-01 10:16:31
【问题描述】：

当我添加时

   display: flex;

在我的容器 div 中，autoprefixer（我正在使用带有“grunt-autoprefixer”的 Grunt：“^3.0.3”）添加：

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;

问题是，我的布局在 Safari 中因

而中断

  display: -webkit-box;

如果我让它显示：-webkit-flex 一切都很好。关于如何禁用此功能的任何想法？

【问题讨论】：

“中断”是什么意思？你能加入minimal, complete, and verifiable example吗？
对不起，意思是：盒子位于容器之外。事实证明，我需要更改-webkit-box（用于旧版浏览器）和-webkit-flex 的顺序。 -webkit-flex 应该是最后一个，否则 Safari 会读取旧版本。

标签： css sass flexbox

【解决方案1】：

原始发帖人在他们的评论中回答了这个问题，但只是为了回顾一下，Safari（无论如何是 8 个）想要 -webkit-flex，根据您的设置，哪个自动前缀不会吐出（或者可能根本没有，我没有实际上尝试修改设置）。如果你的 CSS 看起来像：

display:flex;
display:-webkit-flex;

它似乎修复了它，因为自动前缀输出现在将是：

display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;

对于任何其他 flexbox 属性也是如此，所以：

display:flex;
display:-webkit-flex;
flex-direction:column;
-webkit-flex-direction:column;
justify-content: center;
-webkit-justify-content:center;

【讨论】：