Kompressibilitätsfaktor von Flex-Blöcken in CSS

In der vorherigen Lektion haben wir festgestellt, dass Flex-Elemente anfangen, sich zu komprimieren, wenn nicht genug Platz für sie vorhanden ist. Die Menge, um die die Gesamtbreite die Breite des Elternelements überschreitet, wird als negativer freier Raum bezeichnet.

Technisch gesehen bedeutet Kompression, dass von der Breite jedes Elements ein Stück abgezwackt wird, damit alle Elemente in ihr Elternelement passen.

Lassen Sie uns eine Berechnung durchführen. Nehmen wir zum Beispiel an, wir haben 4 Elemente mit einer Breite von 200px. Nehmen wir weiter an, die Breite des Elternelements beträgt 700px. Das bedeutet, dass die Gesamtbreite der Elemente beträgt:

200px * 4 = 800px

Das sind 100px mehr als die Breite des Elternelements. Lassen Sie uns berechnen, wie viel von jedem Element abgezwackt werden muss, damit die Elemente in ihr Elternelement passen:

100px / 4 = 25px

Das heißt, die Breite der Elemente beträgt:

200px - 25px = 175px

Implementieren Sie die beschriebenen Blöcke und überprüfen Sie durch Messung, dass die Breite der Elemente tatsächlich dem von uns berechneten Wert 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;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}