Steuerung der Kompression von Flex-Blöcken in CSS

Standardmäßig werden von allen Elementen Stücke proportional zur Breite des Elements abgekniffen. Man kann jedoch erreichen, dass von einigen Elementen größere oder kleinere Stücke abgekniffen werden. Dafür gibt es eine spezielle Eigenschaft flex-shrink.

Diese Eigenschaft stellt ein bestimmtes Gewicht dar, mit dem die Breite des Elements bei der Berechnung des abgekniffenen Stücks nach der weiter oben bereits angeführten Formel multipliziert wird. Zum Beispiel, wenn die Breite des Elements 200px beträgt und sein flex-shrink gleich 3 ist, dann wird die gewichtete (d.h. mit dem Gewicht multiplizierte) Breite des Elements wie folgt berechnet:

200px * 3 = 600px

Die Formel unter Berücksichtigung von flex-shrink wird folgende Form haben: negativer freier Platz * (gewichtete Breite des Elements / Summe aller gewichteten Breiten der Elemente).

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben 4 Elemente. Die Breite des ersten Elements betrage 400px, und flex-shrink sei 2. Die Breite der übrigen Elemente betrage 200px, und ihr flex-shrink sei 1. Die Breite des Elternelements betrage 900px.

Die Gesamtbreite der Elemente beträgt:

400px + 3 * 200px = 1000px

Der negative freie Platz beträgt:

1000px - 900px = 100px

Die summierte gewichtete Breite der Elemente beträgt:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Die gewichtete Breite des ersten Elements beträgt:

400px * 2 = 800px

Von dem ersten Element wird folgendes Stück abgekniffen:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Die Breite des Elements beträgt:

400px - 57.14px = 342.86px ~ 343px

Die gewichtete Breite jedes der übrigen Elemente beträgt:

200px * 1 = 200px

Von jedem dieser Elemente wird folgendes Stück abgekniffen:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Die Breite eines solchen Elements beträgt:

200px - 14.2px = 185.8px ~ 186px

Setzen Sie die beschriebenen Blöcke um und überprüfen Sie durch Messung, dass die Breite der Elemente tatsächlich den von uns berechneten Werten entspricht.

Berechnen Sie die Breite der Blöcke und überprüfen Sie dann die Berechnungen durch Messung:

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

Berechnen Sie die Breite der Blöcke und überprüfen Sie dann die Berechnungen durch Messung:

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

Berechnen Sie die Breite der Blöcke und überprüfen Sie dann die Berechnungen durch Messung:

<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: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}