Lăcomia în specificarea lățimii blocurilor flex în CSS
Să presupunem că avem mai multe blocuri flex.
Să setăm pentru unul dintre aceste blocuri flex-grow
la valoarea 1, iar tuturor celorlalte elemente
- o anumită lățime. Ca rezultat, se va întâmpla
că toate blocurile vor avea o lățime fixă,
iar blocul nostru lacom selectat va ocupa
tot spațiul disponibil rămas:
<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;
}
:
Efectul caracteristic este vizibil în special atunci când lățimea părintelui este în procente. În acest caz, la modificarea lățimii părintelui, blocul nostru lacom va avea o lățime variabilă, iar toate celelalte - o lățime fixă:
