隣接するアイテムが同じサイズではない場合、フレックスアイテムを水平方向に中央に配置

Question

内側に3つのdivを持つセクション要素がありますが、水平方向に 'div 2'を中心に配置したいのですが、 justify-content：center "は機能しません。

私はhereを知っています（隣接するアイテムのサイズが異なる場合、フレックスアイテムのタイトルの下にあります）は解決策ですが、それは私のためには機能しません。ここで

はrevelantコードです：

HTML

<section> 
    <div id="div1">DIV 1</div> 
    <div id="div2">DIV 2</div> 
    <div id="div3">DIV 3</div> 
</section> 

CSS

section{ 
    display:flex; 
    position:relative;  
} 
#div1{   
    width:260px; 
} 
#div2{  
    position:absolute; 
    left:50%; 
    transform(translateX:-50%,0); 
} 
#div3{  
    margin-left:auto; 
    width:50px; 
} 

はこちらもcodepenです。

私の目標はcenter 'div2'で、残りのdivはそれぞれ左右の端に移動します。

ご協力いただければ幸いです。

Answer 1

<section> 
    <div id="div1">DIV 1</div> 
    <div id="div2_wrap"> 
     <div id="div2">DIV 2</div> 
    </div> 
    <div id="div3">DIV 3</div> 
    </section> 



section{ 
    display: flex; 
    position:relative; 
    padding:5px; 
    height: 500px; 
    background:yellow; 
} 
div{ 
    padding:5px; 
    background:coral; 
} 
#div1{   
    width:260px; 
} 
#div2_wrap{ 
    position: absolute; 
    left:50%; 
    height: 100%; 
    align-items: center; 
    display: flex; 
} 
#div2 { 
    background-color: #000fff; 
} 
#div3{  
    margin-left:auto; 
    width:50px; 
} 

Answer 2

あなたは別の親divの周りにあなたのdiv Sをラップし、最初等しい幅を有するためにそれらを設定することができます。それからあなたの子供をdivの親の中に並べます。このように：

HTML：

<section> 
    <div class="wrapper" id="div1"> 
    <div class="innerDiv">DIV 1</div> 
    </div> 
    <div class="wrapper" id="div2"> 
    <div class="innerDiv">DIV 2</div> 
    </div> 
    <div class="wrapper" id="div3"> 
    <div class="innerDiv">DIV 3</div> 
    </div> 
</section> 

CSS：

section{ 
    display:flex; 
    padding:5px; 
    background:yellow; 
    text-align:center; 
} 
.wrapper{ 
    display:flex; 
    flex-grow:1; 
    flex-wrap:wrap; 
} 
.innerDiv{ 
    padding:5px; 
    background:coral; 
} 
#div1{ 
    justify-content:flex-start; 
} 
#div1 .innerDiv{ 
    flex:1; 
} 

#div2{ 
    justify-content:center; 
} 
#div3{ 
    justify-content:flex-end; 
} 
#div3 .innerDiv{ 
    width:50px; 
} 

Codepen here

それとも、古い学校よりのブラウザ互換性のある方法で行く、そしてまたあなたのHTMLを維持することができます同じコード。

section { 
    padding: 5px; 
    background: yellow; 
    text-align: center; 
    position: relative; 
    float: left; 
    box-sizing: border-box; 
    width: 100%; 
} 

div { 
    padding: 5px; 
    display: inline-block; 
    background: coral; 
} 

#div1 { 
    width: 260px; 
    float: left; 
} 

#div2 { 
    left: 50%; 
    margin-left: -0.5em; 
    position: absolute; 
} 

#div3 { 
    float: right; 
    width: 50px; 
} 

Codepen Here