vue.js - vue cli 3 postcss显示:flex issue

Question

我的设置
客户端 3所有默认配置(autoprefixer、postcss 等)

我的问题
三星互联网版本 > 7display:flex 的 css 输入仅输出“display: ms-flexbox”，我需要“display: -webkit-flex”来显示。尽管配置选项和浏览器列表有任何安排，但我似乎测试了...不确定我在这里遗漏了什么。

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

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

去掉“no-2009”只会增加一个“display:-webkit-box”，这根本没有帮助

Answer 1

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

justify-content: space-evenly; 很可能是您的问题。它尚未在所有浏览器中得到完全支持。

您已列出您需要支持 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;.

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