Zachłanność przy określonej szerokości bloków flex w CSS
Załóżmy, że mamy kilka bloków flex.
Jednemu z tych bloków ustawmy flex-grow
na wartość 1, a wszystkim pozostałym elementom
- pewną szerokość. W rezultacie okaże się,
że wszystkie bloki będą miały stałą szerokość,
a nasz wybrany blok zachłanny będzie zajmował
całą pozostałą dostępną przestrzeń:
<div class="parent">
<div class="child elem1"></div>
<div class="child elem2"></div>
<div class="child elem3"></div>
</div>
.parent {
display: flex;
width: 400px;
height: 200px;
border: 1px solid red;
}
.child {
height: 50px;
border: 1px solid green;
}
.elem1 {
width: 100px;
}
.elem2 {
flex-grow: 1;
}
.elem3 {
width: 100px;
}
:
Charakterystyczny efekt jest szczególnie widoczny, gdy szerokość rodzica jest podana w procentach. W tym przypadku przy zmianie szerokości rodzica nasz zachłanny blok będzie miał płynną szerokość, a wszystkie pozostałe - stałą:
