Vue cli 3 postcss显示：flex问题答案

【问题标题】：Vue cli 3 postcss display:flex issueVue cli 3 postcss显示：flex问题
【发布时间】：2018-07-26 18:59:47
【问题描述】：

我的设置
Vue cli 3 所有默认配置（autoprefixer、postcss 等）

我的问题
三星网络版 > 7 display:flex 的 css 输入只输出“display:ms-flexbox”，我需要“display:-webkit-flex”来显示..尽管我似乎测试了任何配置选项和浏览器列表的安排，但它不会...不知道我在这里缺少什么。

效果
我的 vue spa sidenav 菜单弄乱了布局仅在三星互联网上，我确定这是因为它需要我似乎无法生成的 -webkit-flex 前缀

我确定“autoprefixer”下的“browsers”配置项是多余的，我的输出有无它是一样的。

取出“no-2009”只加了一个“display:-webkit-box”，一点用都没有

【问题讨论】：

【解决方案1】：

在 GitHub 问题中，您在代码示例中使用了 justify-content: space-evenly;。

justify-content: space-evenly; 很可能是您的问题。它还没有完全支持所有浏览器。

您已列出需要支持最新 2 个版本的 IE。这意味着 IE 10 和 11。我很确定这些浏览器都不支持 justify-content: space-evenly;，因为它是规范的后期添加。如果您在这些浏览器中进行测试，它应该也会在那里出现问题。

在其上方添加justify-content: space-around; 作为备份。它的工作方式几乎相同，但分配空间的方式略有不同。

ul {
  justify-content: space-around;
  justify-content: space-evenly;
  /* ... The rest of the CSS... */
}

它需要按这个顺序放置，如果浏览器支持它，它将使用justify-content: space-evenly;，如果不支持，它将回退到使用justify-content: space-around;。

它在需要回退的浏览器中看起来不像在不需要它的浏览器中那样好。使用后备后看起来会比没有后好得多。

【讨论】：

【解决方案2】：

Daniel 完全正确，Samsung Browser 7.2 不能很好地配合“justify-content: space-evenly”。某些版本的 safari 也不能（我们办公室有人在他们的 iphone 上给我看，但我还没抓到浏览器版本）。

我最终采用的修复方法是在元素的 :before 和 :after 伪元素上使用 'display: block' 进行 'space-between' hack。

我了解到的其他堆栈溢出帖子的 2 个链接是：

到目前为止，在所有测试的设备上都像魅力一样工作，包括在三星浏览器 7.2 和同一个办公室伙伴的 iphone 浏览器上（无论是哪个，无论是 safari 还是非 safari）

【讨论】：

【解决方案3】：

【讨论】：