Question

我目前正在使用以下代码在可用的地方使用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

问：如何检测这种情况？

Answer 1

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

Edge确实可以识别space-between，所以我在类似情况下所做的是将justify-content: space-between设置为默认值，然后跟随@supports not使用仅Edge支持的功能在其他浏览器中使用space-evenly。所以我的最终代码如下：

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

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

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

Answer 2

尝试使用中间的空格来模仿空格，如下所示：

<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>

结果如下：

Answer 3

我遇到了同样的问题。

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

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

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

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

3 个答案: