Unterschiedliche Breiten von Elementen und Komprimierbarkeit von Flex-Blöcken in CSS

Nehmen wir nun an, dass unsere Elemente unterschiedliche Breiten haben. In diesem Fall ist das abgespaltene Stück proportional zur Breite dieses Elements und wird nach der folgenden Formel berechnet: negativer Freiraum * (Breite des Elements / Summe aller Elementbreiten).

Nehmen wir an, wir haben 4 Elemente. Die Breite des ersten Elements betrage 400px, die Breite der restlichen Elemente - 200px, und die Breite des Elternelements 900px.

Die Gesamtbreite der Elemente beträgt:

400px + 3 * 200px = 1000px

Dann ist der negative Freiraum gleich:

1000px - 900px = 100px

Berechnen wir, wie viel vom ersten Element abgezogen wird:

100px * (400px / 1000px) = 40px

Das heißt, seine Breite beträgt:

400px - 40px = 360px

Berechnen wir, wie viel von jedem der übrigen Elemente abgezogen wird:

100px * (200px / 1000px) = 20px

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

200px - 20px = 180px

Implementieren Sie die beschriebenen Blöcke 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: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}