Pohlepa kod specificirane širine flex blokova u CSS
Neka imamo nekoliko flex blokova.
Hajde da jednom od ovih blokova postavimo flex-grow
u vrednosti 1, a svim ostalim elementima
- neku širinu. Kao rezultat, ispostaviće se
da će svi blokovi imati fiksnu širinu,
a naš izabrani pohlepni blok će zauzimati
svaj ostali dostupan prostor:
<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;
}
:
Karakterističan efekat je posebno uočljiv kada je širina roditelja u procentima. U tom slučaju pri promeni širine roditelja naš pohlepni blok će imati plutajuću širinu, a svi ostali - fiksnu:
