Bitişik öğeler aynı boyutta olmadığında yatay olarak esnek bir öğe

Question

İçinde 3 div içeren bir bölüm elementim var, yatay olarak "div 2" yi ortalamak istiyorum, ama sorun adyanth divs aynı boyutta değil " haklı içerik: merkez "çalışmıyor.

Biliyorum here ("Bitişik öğeler boyut olarak değiştiğinde merkezi bir esnek öğe" başlığı altında) bir çözümdür, ancak benim için çalışmaz.

HTML

İşte

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

ayrıca codepen olduğunu

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

CSS:

İşte revelant kodudur.

Amacım 'div2' merkezidir ve divlerin kalanını sırasıyla sol ve sağ kenarlara taşır.

Herhangi bir yardım için teşekkür ederiz.

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

Başka ebeveyn div etrafında div s sarın ve ilk eşit genişlikleri sahip olmalarını ayarlayabilirsiniz. Ardından, çocuğunuzun içindeki div s numaralarını hizalayın. Şunun gibi:

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

Yoksa eski okul daha tarayıcı uyumlu bir şekilde gitmek ve ayrıca HTML tutmak olabilir kod aynı.

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