Gierigkeit bei festgelegter Breite von Flex-Blöcken in CSS
Nehmen wir an, wir haben mehrere Flex-Blöcke.
Weisen wir einem dieser Blöcke flex-grow
mit dem Wert 1 zu, und allen anderen Elementen
- eine bestimmte Breite. Als Ergebnis werden
alle Blöcke eine feste Breite haben,
und unser gieriger Block wird den
gesamten verbleibenden verfügbaren Platz einnehmen:
<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;
}
:
Der charakteristische Effekt ist besonders auffällig, wenn die Breite des Elternelements in Prozent angegeben ist. In diesem Fall wird bei Änderung der Breite des Elternelements unser gieriger Block eine variable Breite haben, während alle anderen eine feste Breite behalten:
