Stretch Höhe mit Flexbox align-Artikel Mitte

Question

Ich habe ein div mit display: flex; flex-direction: row;. Die Kinder dieses Divs nehmen die volle Höhe, wenn ich nicht align-items: center angeben. Code unten -

.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: beige; 
 
    border: 1px solid red; 
 
    margin: 10px 0; 
 
} 
 

 
.row2 { 
 
    align-items: center; 
 
} 
 

 
.row-item { 
 
    border: 1px solid green; 
 
} 
 

 
.item1, 
 
.item3 { 
 
    width: 100px; 
 
} 
 

 
.item2 { 
 
    flex: 1; 
 
}

<div class="row row1"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div> 
 

 
<div class="row row2"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div>

JSFiddle

Was ich will, ist zu erreichen, dass 2.1 und 2.2 sollte 50px (50%) Höhe nehmen und sollte sein Gehalt Mitte vertikal ausgerichtet haben. Sie sollten auch den gesamten verfügbaren Platz horizontal strecken (wie Breite: automatisch oder 100%). Dann, wenn 2.1 nicht vorhanden ist, sollte 2.2 100px Höhe nehmen und vertikal zur Mitte ausgerichtet sein.

Answer 1

Sie benötigen Zeilen Elemente eine flexible Box zu machen und align-items: center; ihnen

gelten

Dies ist der Code, den Sie

.row1 .row-item { 
    display: flex; 
    align-items: center; 
} 

Siehe unten führen sollte hinzufügen:

.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    height: 100px; 
 
    background: beige; 
 
    border: 1px solid red; 
 
    margin: 10px 0; 
 
} 
 

 
.row2 { 
 
    align-items: center; 
 
} 
 

 
.row-item { 
 
    border: 1px solid green; 
 
} 
 

 
.row1 .row-item { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.row1 .row-item div { 
 
    width: 100%; 
 
    border: 1px solid blue; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.item1, 
 
.item3 { 
 
    width: 100px; 
 
} 
 

 
.item2 { 
 
    flex: 1; 
 
}

<div class="row row1"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div> 
 

 
<div class="row row2"> 
 
    <div class="row-item item1">1</div> 
 
    <div class="row-item item2"> 
 
    <div> 2.1 </div> 
 
    <div> 2.2 </div> 
 
    </div> 
 
    <div class="row-item item3">3</div> 
 
</div>

Answer 2

Sie können line-height verwenden, um eine vertikale Ausrichtung zu erreichen. In diesem Fall, da Ihre .row1 hat eine Höhe von 100px zu diesen CSS folgenden hinzufügen: line-height: 100px; Siehe aktualisiert jsfiddle und nur .row1 sieht diese jsfiddle