Das Greediness-Verhalten von Flex-Elementen in CSS

Nehmen wir an, wir haben zwei Flex-Blöcke, die in einer Reihe angeordnet sind. Diese Blöcke haben eine Breite von 100px, und ihrem Elternelement - 300px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Wie Sie sehen, ist die Gesamtbreite unserer Elemente kleiner als die Breite des Elternelements, daher bleibt rechts freier Raum.

Wenn gewünscht, kann dieser freie Raum proportional zwischen unseren Elementen aufgeteilt werden. Dies geschieht mit der Eigenschaft flex-grow, die den Flex-Elementen zugewiesen wird. Der Wert dieser Eigenschaft ist eine dimensionslose Zahl.

Lassen Sie uns in der Praxis sehen, wie diese Eigenschaft funktioniert.

Beispiel

Derzeit haben wir zwei Flex-Blöcke mit einer Breite von 100px. Ihre Gesamtbreite beträgt 200px, und die Breite des Elternelements beträgt 300px. Somit bleibt ein freier Raum von 100px.

Wenn den Elementen kein flex-grow zugewiesen ist, sehen wir einfach diesen freien Raum. Wenn es jedoch zugewiesen ist, dann ist die tatsächliche Breite der Elemente größer als die angegebene - sie teilen den freien Raum proportional unter sich auf und addieren ihn zu ihrer eigenen Breite.

Nehmen wir zum Beispiel an, das erste Element hat einen flex-grow Wert von 1, und das zweite - 3. Lassen Sie uns berechnen, welchen Teil des freien Raums jedes Element erhält.

Zuerst müssen wir die Gesamtsumme der flex-grow-Einheiten aller unserer Elemente ermitteln. Beim ersten Element beträgt er 1, und beim zweiten - 3. Das bedeutet, dass die Summe 4 beträgt.

Teilen wir nun den 100px freien Raum durch 4 und erhalten, dass 25px auf eine flex-grow-Einheit entfällt. Somit wird zum ersten Element eine Einheit flex-grow addiert, also 25px, und zum zweiten - drei Einheiten, also 75px.

Die Breite des ersten Elements beträgt dann 125px, und die des zweiten - 175px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 3;
}

Beispiel

Nehmen wir nun an, die Breite des Elternelements beträgt 400px, die Breite des ersten Elements 200px, und die Breite des zweiten Elements - 100px. Somit beträgt der freie Raum wieder 100px.

Weisen wir jedem Element einen flex-grow Wert von 1 zu. Die Summe beträgt 2, das heißt, der 100px freie Raum muss durch 2 geteilt werden. Somit entfallen 50px auf eine Einheit von Greediness (flex-grow).

Da alle Elemente den gleichen Wert für flex-grow haben, wird zu allen Elementen der gleiche Wert von 50px addiert. Das bedeutet, dass das erste Element 250px wird, und das zweite 150px wird:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Beispiel

Nehmen wir wieder an, die Breite des Elternelements beträgt 400px, die Breite des ersten Elements 200px, und die Breite des zweiten Elements - 100px.

Setzen wir nun für das erste Element flex-grow auf den Wert 3, und für das zweite - auf den Wert 1. Die Summe von Greediness (flex-grow) beträgt dann 4. Dann entspricht eine Einheit Greediness 100px / 4 = 25px.

Zum ersten Element werden 75px addiert, und es wird zu 275px, und zum zweiten - 25px, es wird zu 125px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
</div>

.parent {
	display: flex;
	width: 400px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}

Praktische Aufgaben

In allen folgenden Aufgaben wird Ihnen ein Code mit Flex-Elementen präsentiert, die Breite und flex-grow haben. Berechnen Sie anhand des präsentierten Codes, welche Abmessungen jedes der Elemente haben wird. Führen Sie dann den Code aus und überprüfen Sie Ihre Berechnungen, indem Sie die tatsächlichen Breiten der Elemente messen.

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 3;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 200px;
	flex-grow: 3;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 1000px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 1;
}
.elem2 {
	width: 100px;
	flex-grow: 2;
}
.elem3 {
	width: 100px;
	flex-grow: 4;
}
.elem4 {
	width: 100px;
	flex-grow: 3;
}