Die Eigenschaft flex-shrink

Die Eigenschaft flex-shrink legt fest, wie stark ein Flex-Block im Vergleich zu benachbarten Elementen innerhalb des Flex-Containers schrumpft, wenn nicht genügend freier Platz vorhanden ist.

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

Gilt für: einen bestimmten Flex-Block.

Diese Eigenschaft ist Teil der Kurzschreibweise flex.

Syntax

Selektor {
	flex-shrink: positive Zahl;
}

Standardwert: 1.

Beispiel

Nehmen wir an, wir haben 3 Elemente. Die Breite von jedem beträgt 200px, und die Gesamtbreite beträgt 600px, was größer ist als die Breite des übergeordneten Containers, die 350px beträgt:

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

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

Berechnen wir den negativen freien Raum nach der Formel:

600px - 350px = 250px

Die gewichtete Gesamtbreite der Elemente unter Berücksichtigung der Werte der Eigenschaft flex-shrink für jedes Element beträgt:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Bestimmen wir nun, um wie viel das erste Element schrumpft:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Zweites Element:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Drittes Element:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Daraus folgt, dass das dritte Element, bei dem der Wert von flex-shrink gleich 3 ist, stärker schrumpft als die anderen Elemente.

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 den Umbruch von Flex-Blöcken 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-grow,
die das "Wachstum" von Flex-Blöcken festlegt
die Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis