Compressiefactor van flexblokken in CSS

In de vorige les hebben we vastgesteld dat wanneer flex-elementen niet genoeg ruimte hebben, ze beginnen te krimpen. De mate waarin de totale breedte groter is dan de breedte van de ouder wordt negatieve vrije ruimte genoemd.

Technisch gezien betekent compressie dat van de breedte van elk element een stukje breedte wordt afgenomen zodat alle elementen in hun ouder passen.

Laten we een berekening maken. Stel, we hebben bijvoorbeeld 4 elementen met een breedte van 200px. Stel dat de breedte van de ouder gelijk is aan 700px. Dit betekent dat de totale breedte van de elementen gelijk is aan:

200px * 4 = 800px

Deze breedte is 100px groter dan de breedte van de ouder. Laten we berekenen hoeveel er van elk element af moet zodat de elementen passen in hun ouder:

100px / 4 = 25px

Dat wil zeggen, de breedte van de elementen wordt:

200px - 25px = 175px

Implementeer de beschreven blokken en controleer met een meting of de breedte van de elementen inderdaad gelijk is aan wat wij 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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}