フレックスボックスの幅の異なる2つの要素の中央に1つの要素を配置します

Question

ミュージック再生コントローラを作成していて、コンテナの左、中央、右の3つのセクションがあります。しかし、左右の辺の幅が違うので、中央の部分はdivの本当の中心にはありませんが、それが必要です。私はflexboxのspace-betweenオプションを使って項目をレイアウトしています。

#container { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    background-color: lightgrey; 
 
} 
 

 
#container > div { 
 
    height: 100px; 
 
    border: 2px dashed red; 
 
    
 
    /*This is only for looks*/ 
 
    text-align: center; 
 
    padding: 5px; 
 
}

<div id="container"> 
 
    <div>Left Side</div> 
 
    <div>I want this centered</div> 
 
    <div>Right Side (Extra text for extra length)</div> 
 
</div>

Answer 1

あなたは中心に近づけるためにマージンを使用することができます。しかし、さまざまなビューポートで一貫性のあるフレックスボックスで完全なセンタリングを行うには、HTMLをやや修正する必要があります。

あなたはdisplay:inline-flex宣言とフレックスコンテナ自身へ#containerの直接の子をオンにし、それらに1とjustify-content: centerのflex値を与える必要があります。

そこから、あなたのコンテンツを子divに追加します。左と右のdivに配置するには、margin-right: autoとmargin-left: autoをそれぞれ使用します。

#container { 
 
    display: flex; 
 
    background-color: lightgrey; 
 
} 
 
.flex { 
 
    flex: 1; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
} 
 
.flex > div { 
 
    height: 100px; 
 
    border: 2px dashed red; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
.left div { 
 
    margin-right: auto; 
 
} 
 
.right div { 
 
    margin-left: auto; 
 
}

<div id="container"> 
 
    <div class="left flex"> 
 
    <div>Left Side</div> 
 
    </div> 
 
    <div class="center flex"> 
 
    <div>I want this centered</div> 
 
    </div> 
 
    <div class="right flex"> 
 
    <div>Right Side (Extra text for extra length)</div> 
 
    </div> 
 
</div>