schematu flexbox wypełnienia dostępnej przestrzeni w pionie

Question

Teraz w rzędzie schematu flexbox mogę napisać

<div layout="row"> 
    <div>some content</div> 
    <div flex></div> <!-- fills/grows available space --> 
    <div>another content</div> 
</div> 

chciałbym osiągnąć to samo, ale w pionie, jak na tym zdjęciu Obecnie problemem jest to, że div, które musiałyby wzrost nie ma żadnej wysokości, więc dwie treści są poniżej siebie. Chcę, aby moja druga zawartość znajdowała się na spodzie kontenera nadrzędnego, który ma poprawioną wysokość! Wiem, że mógłbym rozwiązać ten problem, ustawiając drugą treść absolutnie i bottom: 0;, ale czy mogę to osiągnąć za pomocą Flexboksa?

Answer 1

Po prostu trzeba użyć flex-direction: column na rodzic i flex: 1 na środku div.

body, 
 
html { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
.row > div:not(.flex) { 
 
    background: #676EE0; 
 
} 
 
.flex { 
 
    flex: 1; 
 
    background: #67E079; 
 
}

<div class="row"> 
 
    <div>some content</div> 
 
    <div class="flex"></div> 
 
    <!-- fills/grows available space --> 
 
    <div>another content</div> 
 
</div>

Answer 2

więc można spróbować to:

1. flex-direction: column do elastycznego pojemnika.

2. flex: 1 dla elementu, który musi wypełnić pozostałe miejsce.

zobacz demo poniżej gdzie flexbox obejmuje wysokość rzutni:

body { 
 
    margin: 0; 
 
} 
 
*{ 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 
.flex { 
 
    flex: 1; 
 
} 
 
.row, .row > * { 
 
    border: 1px solid; 
 
}

<div class="row"> 
 
    <div>some content</div> 
 
    <div class="flex">This fills the available space</div> 
 
    <!-- fills/grows available space --> 
 
    <div>another content</div> 
 
</div>

Cheers!