Null-Gier von Flex-Elementen in CSS

Wenn flex-grow für ein Element null ist, dann wird dieses Element nicht an der Verteilung des freien Raums teilnehmen. Standardmäßig hat die Gier genau den Wert null, und deshalb teilen Elemente ohne festgelegten flex-grow den freien Raum nicht untereinander auf.

Lassen Sie uns zur Veranschaulichung eine Beispielrechnung durchführen. Nehmen wir an, wir haben drei Flex-Elemente, jedes mit einer Breite von 100px. Das erste Element habe kein flex-grow (oder es ist 0), das zweite Element habe ein flex-grow von 2 und das dritte - von 3.

Nehmen wir an, die Breite des Elternelements beträgt 500px. Dann beträgt der freie Raum 200px, und auf eine Einheit flex-grow entfallen 200px / 5 = 40px. Folglich bleibt die Breite des ersten Elements bei 100px, da es nicht an der Verteilung teilnimmt, die Breite des zweiten beträgt 100px + 2 * 40px = 180px, und die Breite des dritten - 100px + 3 * 40px = 220px.

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 vorgestellten 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: 0;
}
.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: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<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: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}