Horizontal ein Flex-Element zentrieren, wenn benachbarte Elemente nicht die gleiche Größe haben

Question

Ich habe ein Abschnittselement mit 3 divs innen, ich möchte horizontal 'div 2' zentrieren, aber das Problem ist, dass die benachbarten divs nicht die gleiche Größe haben. " justify-content: center "funktioniert nicht.

Ich kenne here (unter dem Titel "Center ein Flex-Element, wenn benachbarte Elemente in der Größe variieren") ist eine Lösung, aber es funktioniert nicht für mich. Hier

ist der Revelant Code:

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; 
} 

Hier ist auch ein codepen.

Mein Ziel ist center 'div2' und verschiebe den Rest der Divs nach links bzw. rechts.

Jede Hilfe wäre willkommen.

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

Sie können Ihre div s wickeln um einen anderen Elternteil div und setzte sie erste gleiche Breiten zu haben. Dann richten Sie Ihre Kinder div s innerhalb der Eltern. Wie folgt aus:

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

Oder Sie können mit der alten Schule mehr Browser kompatibel Weg zu gehen, und halten auch Ihre HTML Code gleich.

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