Grådighet ved spesifisert bredde på flex-bokser i CSS
La oss si at vi har flere flex-bokser.
La oss sette flex-grow
til verdien 1 for en av disse boksene, og gi alle de andre elementene
en bestemt bredde. Resultatet blir at
alle boksene vil ha en fast bredde,
og vår grådige boks vil oppta
all gjenværende tilgjengelig plass:
<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 effekten er spesielt merkbar når bredden på forelderen er i prosent. I dette tilfellet, ved endring av forelderens bredde, vil vår grådige boks ha en flytende bredde, mens alle de andre vil ha fast bredde:
