フレックスボックスjustify-content：センターがSafariで正常に動作しません

Question

フレックスボックスとjustify-content: centerをSafariでうまく再生できません。

HTML：

<div class="flex-row"> 
    <div class="label"> Label </div> 
    <div class="well"></div> 
</div> 

CSS：

これはそれの上に中央揃えラベルで、うまくシンプルなグレーを与えChromeとFFで

.flex-row { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
} 

.well { 
    width: 230px; 
    height: 200px; 
    background-color: grey; 
} 

.label { 
    z-index: 2; 
    position: absolute; 
    margin-top: -8px; 
} 

。しかしSafariでは、ラベルは中央にない。非中心ラベルを見るためにSafariで下のCodePenの例を開きます。誰もが既存の回避策を知っている場合

https://codepen.io/jklevin/pen/weLvxx

私の勘では、これはSafariで実装のバグが原因であるということですが、好奇心が強いです。

Answer 1

absoluteフレックスボックスは、一部のブラウザでは動作する可能性がありますが、ポジショニングは正式にはサポートされていません。

https://www.w3.org/TR/css-flexbox-1/#abspos-items

それは外の流れであるため、フレックスコンテナの絶対-位置付け子は、フレックスレイアウトに参加しません。

あなたはそれが水平方向の中央たい場合は、単にleftを追加し、戻ってそれ自身の幅の50％を、それを動かすためにtransform: translate()を使用し、そしてあなたも、8pxそれを上に移動するためにそれを使用することができます。

.flex-row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.well { 
 
    width: 230px; 
 
    height: 200px; 
 
    background-color: grey; 
 
} 
 

 
.label { 
 
    z-index: 2; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%,-8px); 
 
}

<div class="flex-row"> 
 
    <div class="label"> Label </div> 
 
    <div class="well"></div> 
 
</div>