CSSを正当化する方法：Safariでスペースを均等に空白に戻す？

Question

私はWebページを構築し、さまざまなブラウザに対してテストを実行しています。デザインの1つにフレックスボックスとスペースが均等に含まれています。これは広くサポートされていないことが分かります。

.some_element { 
display:flex; 
justify-content:space-between; 
justify-content:space-evenly; 
} 

上記のコードはFirefox、Chrome、IE11、Edgeでは正常に動作しますが、Safariでは機能しません。

Safariがspace-evenlyプロパティを理解し、認識していますが、それを何もしない、言い換えれば、結果は同じようなものです：justify-content:initial;

公式サファリは私が包丁こととしようと思ったので-webkit-justify-contentをサポートしていません。このようにフォールバック：

.some_element { 
    display:flex; 
    justify-content:space-between; 
    -webkit-justify-content:space-evenly; 
    -moz-justify-content:space-evenly; 
    } 

しかし、再びSafariはそれを理解し、それが同じinitialのようにそれをレンダリングします。 iOSでも同じことが起こり、ウェブサイトのデザインがばらばらになります...

審美的には空間的に均等に見えるので、これをサポートしているブラウザでそれを活用したいので、アップルのためにそれをドロップすることを鋭くしない....一方で、アップルのユーザーは訪問者の重要な部分ですので、私は問題を無視し、initialとレンダリングされたページを残すことはできません。

ありがとうございます。

Answer 1

@supportsは役に立たないのである、（ちょっとAppleは、あなたがため息？この機能のポイントは何であったかを私に思い出させることができます）が、あなたは:pseudo sおよびspace-betweenと同じレイアウトを持つことができます上記の私のコメントを参照してください。
唯一の制約は、フレックスコンテナ上で擬似体を使用することができないことです。

➡️Codepen

➡️関連コード：5つのアイテムと

.evenly-like { 
    display: flex; 
    justify-content: space-between; 

    &:before, 
    &:after { 
    content: ''; 
    display: block; 
    } 
} 

、6 "スペース" はspace-evenly及び4 space-betweenと（半+ 4 +半分と等しく広いありますspace-around）。
フレックスコンテナに2：擬似体を作成し、フレックスボックスの力でフレックスアイテムと見なすと、space-betweenには5 + 2 = 7個のアイテムがあり、したがって6つの等しく広い「スペース」が問題解決されます。

➡️コンプリートスニペット：

/* /!\ Pasted from compiled Scss in Codepen with Autoprefixer. Your browserslist is probably not as complete as that one :) */ 
 

 
.parent { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display:  flex; 
 
    border: 1px solid darkred; 
 
    margin-bottom: 30px; 
 
} 
 
.parent.evenly { 
 
    -webkit-box-pack: space-evenly; 
 
    -ms-flex-pack: space-evenly; 
 
    justify-content: space-evenly; 
 
} 
 
.parent.around { 
 
    -ms-flex-pack: distribute; 
 
     justify-content: space-around; 
 
} 
 
.parent.between { 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
} 
 
.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; 
 
}

<h1>space-evenly</h1> 
 
<div class="parent evenly"> 
 
    <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> 
 

 
<h1>Mimicking space-evenly with space-between: and :pseudos</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> 
 

 
<hr> 
 

 
<h1><i>space-around</i></h1> 
 
<div class="parent around"> 
 
    <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> 
 

 
<h1><i>space-between</i></h1> 
 
<div class="parent between"> 
 
    <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>