Die Eigenschaft flex-grow

Die Eigenschaft flex-grow bestimmt, wie viel größer ein einzelner Flex-Block im Vergleich zu benachbarten Elementen sein kann, falls es erforderlich ist.

Wenn beispielsweise alle Flex-Blöcke innerhalb eines Flex-Containers flex-grow:1 haben, dann werden sie gleich groß sein. Wenn einer von ihnen flex-grow:2 hat, wird er 2 mal größer sein als alle anderen.

Wenn die Gesamtbreite der Elemente kleiner ist als die Breite des Elternelements, bleibt rechts leerer Platz. Falls gewünscht, kann dieser freie Platz 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.

Gilt für: einen bestimmten Flex-Block.

Diese Eigenschaft ist Teil der Kurzschreibweise flex.

Syntax

Selektor {
	flex-grow: positive Zahl;
}

Standardwert: 0.

Beispiel

Wir haben jetzt 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 Platz von 100px.

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

Nehmen wir beispielsweise an, das flex-grow des ersten Elements beträgt 1 und das des zweiten 3. Lassen Sie uns berechnen, welchen Anteil des freien Platzes jedes Element erhält.

Zuerst muss die Gesamtsumme der flex-grow-Einheiten aller unserer Elemente ermittelt werden. Beim ersten Element beträgt sie 1 und beim zweiten 3. Das bedeutet, dass die Summe 4 beträgt.

Teilen wir nun die 100px freien Platz 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 an, die Breite des Elternelements beträgt nun 400px, die Breite des ersten Elements 200px und die Breite des zweiten Elements - 100px. Somit beträgt der freie Platz wieder 100px.

Weisen wir jedem Element ein flex-grow von 1 zu. Die Summe beträgt 2, das heißt, der 100px freie Platz muss durch 2 geteilt werden. Somit entfallen 50px auf eine Einheit "Gier".

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 an, die Breite des Elternelements beträgt wieder 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 der "Gier" beträgt dann 4. Dann entspricht eine Einheit der Gier 100px / 4 = 25px.

Zum ersten Element werden 75px addiert, es wird also 275px, und zum zweiten - 25px, es wird 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;
}

Siehe auch

die Eigenschaft flex-direction,
die die Richtung der Achsen der Flex-Blöcke festlegt
die Eigenschaft justify-content,
die die Ausrichtung entlang der Hauptachse festlegt
die Eigenschaft align-items,
die die Ausrichtung entlang der Querachse festlegt
die Eigenschaft flex-wrap,
die die Umbrüche der Flex-Blöcke festlegt
die Eigenschaft flex-flow,
Kurzschreibweise für flex-direction und flex-wrap
die Eigenschaft order,
die die Reihenfolge der Flex-Blöcke festlegt
die Eigenschaft align-self,
die die Ausrichtung eines einzelnen Blocks festlegt
die Eigenschaft flex-basis,
die die Größe eines bestimmten Flex-Blocks festlegt
die Eigenschaft flex-shrink,
die die Komprimierbarkeit der Flex-Blöcke festlegt
die Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis