Grådighed ved specificeret bredde af flex blokke i CSS
Lad os sige, at vi har flere flex blokke.
Lad os give en af disse blokke flex-grow
sat til 1, og give alle de andre elementer
en bestemt bredde. Resultatet vil være,
at alle blokkene har en fast bredde,
og vores grådige blok vil optage
al den tilgængelige plads, der er tilbage:
<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;
}
:
Den karakteristiske effekt er især tydelig, når forælderens bredde er i procenter. I dette tilfælde vil vores grådige blok have en flydende bredde, når forælderens bredde ændres, mens alle de andre har en fast bredde:
