Kompressionsfaktorn för flexblock i CSS

I föregående lektion fick vi reda på att när flexelementen inte har tillräckligt med utrymme börjar de komprimeras. Det faktum att den totala bredden är större än förälderns bredd kallas negativt fritt utrymme.

Tekniskt sett innebär kompression att en bit av bredden skalas av från varje elements bredd så att alla element får plats i sin förälder.

Låt oss göra en beräkning. Låt oss till exempel anta att vi har 4 element med en bredd på 200px. Låt oss anta att förälderns bredd är 700px. Det betyder att den totala bredden på elementen är:

200px * 4 = 800px

Denna bredd är 100px större än förälderns bredd. Låt oss beräkna hur mycket som måste skalas av från varje element för att elementen ska få plats i sin förälder:

100px / 4 = 25px

Det vill säga bredden på elementen blir:

200px - 25px = 175px

Implementera de beskrivna blocken och kontrollera med mätning att elementens bredd verkligen blir lika med vår beräkning.

Beräkna blockens bredd och kontrollera sedan beräkningarna med mätning:

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