如何在 Edge 中检测对空间均匀的部分支持答案

【问题标题】：How to detect partial support for space-evenly in Edge如何在 Edge 中检测对空间均匀的部分支持
【发布时间】：2021-01-25 12:05:41
【问题描述】：

我目前正在使用以下代码在可用的情况下使用space-evenly：

 display: flex;
// IE11: doesn't support space-evenly.
justify-content: space-around;

@supports (justify-content: space-evenly) {
    // Use space-evenly if supported.
    justify-content: space-evenly;
}

不幸的是，Edge 支持space-evenly，但无法正确显示。

根据研究，Edge 仅在 CSS Grid 中支持它，而不在 flexbox 中支持。 https://caniuse.com/#search=space-evenly

问：如何检测这种情况？

【问题讨论】：

相关：stackoverflow.com/q/45134400/3597276
无关，但一个：x; @supports (a: y) { a: y; } 是多余的——CSS 本身鼓励你简单地写 a: x;一个：是的；让浏览器错误处理和级联解析来做他们的事。（当然，这个问题的解决方案几乎肯定不会首先涉及到支持，但我认为这是一个简洁的小 FYI。）

标签： css flexbox microsoft-edge

【解决方案1】：

因为 Edge 可以识别 CSS Grid 的 space-evenly，但不能识别 Flexbox，所以在这种情况下，@supports 将无法正常工作。

Edge 确实识别space-between，所以我在类似情况下所做的是将justify-content: space-between 设置为默认值，然后使用只有Edge 支持的@supports not 才能在其中使用space-evenly其它浏览器。所以我的最终代码看起来像：

.className {
  justify-content: space-between;
}

@supports not (-ms-ime-align: auto) {
  .className {
    justify-content: space-evenly
  }
}

这使得所有不支持 Edge 特定 CSS 的浏览器都将使用 space-evenly。如果您需要添加其他内容，例如外部的填充/边距，以便 space-between 仍然在边缘显示一些空间，您可以将其添加到默认样式中，然后在 @supports 中将其删除。

【讨论】：

【解决方案2】：

尝试使用 space-between 来模仿 space-evenly，像这样：

<style type="text/css">
    .parent {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border: 1px solid darkred;
        margin-bottom: 30px;
    }
        .parent.evenly-like {
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
            .parent.evenly-like:before,
            .parent.evenly-like:after {
                content: '';
                display: block;
                width: 2px;
                background-color: red;
            }
    .item {
        padding: 10px;
        color: white;
        background-color: slateblue;
        outline: 1px dotted darkblue;
    }
</style>
<h1>Mimicking space-evenly with space-between</h1>
<div class="parent evenly-like">
    <div class="item">1 lorem</div>
    <div class="item">2 lorem</div>
    <div class="item">3 lorem</div>
    <div class="item">4 lorem</div>
    <div class="item">5 lorem</div>
</div>

结果如下：

【讨论】：

【解决方案3】：

我也遇到了同样的问题。

我所做的是将 flex 容器内元素的宽度设置为 100%

.container{
  justify-content: space-between;
}

.container .child-elements{
  width: 100%;
}

【讨论】：