Как обнаружить частичную поддержку пространства-равномерно в Edge

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

Попробуйте использовать пробел для имитации пространства равномерно, например:

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

Результат, как показано ниже: