Verschillende breedtes van elementen en inkrimpen van flexblokken in CSS

Stel dat onze elementen nu verschillende breedtes hebben. In dit geval zal het afgesnoepte stukje proportioneel zijn aan de breedte van dat element en wordt berekend met de volgende formule: negatieve vrije ruimte * (breedte van element / som van alle breedtes van elementen).

Stel we hebben 4 elementen. Stel de breedte van het eerste element is 400px, de breedte van de overige elementen - 200px, en de breedte van de ouder 900px.

De totale breedte van de elementen is:

400px + 3 * 200px = 1000px

Dan is de negatieve vrije ruimte gelijk aan:

1000px - 900px = 100px

Laten we berekenen hoeveel er van het eerste element wordt afgesnoept:

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

Dat betekent dat de breedte gelijk zal zijn aan:

400px - 40px = 360px

Laten we berekenen hoeveel er van elk van de overige elementen wordt afgesnoept:

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

Dat betekent dat de breedte van deze elementen gelijk zal zijn aan:

200px - 20px = 180px

Implementeer de beschreven blokken en controleer met meting of de breedte van de elementen inderdaad gelijk is aan wat we hebben berekend.

Bereken de breedte van de blokken en controleer vervolgens de berekeningen met een meting:

<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;
}