Hebzucht bij gespecificeerde breedte van flex blokken in CSS
Stel dat we meerdere flexblokken hebben.
Laten we een van deze blokken flex-grow
op waarde 1 zetten, en alle andere elementen
- een bepaalde breedte. Het resultaat zal zijn,
dat alle blokken een vaste breedte hebben,
en ons uitgekozen hebzuchtige blok zal alle
overige beschikbare ruimte innemen:
<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;
}
:
Het karakteristieke effect is vooral merkbaar wanneer de breedte van de ouder in procenten is. In dat geval zal bij het wijzigen van de breedte van de ouder ons hebzuchtige blok een variërende breedte hebben, en alle andere - een vaste:
