Komprimeringsfaktoren for flex-blokke i CSS

I den forrige lektion fandt vi ud af, at når flex-elementer ikke har plads nok, begynder de at komprimere. Den mængde, som den samlede bredde er større end forælderens bredde, kaldes negativt frit rum.

Teknisk set betyder komprimering, at et stykke bredde fjernes fra hvert elements bredde, så alle elementer passer inde i deres forælder.

Lad os foretage en beregning. Lad os for eksempel sige, at vi har 4 elementer med en bredde på 200px. Lad os samtidig sige, at forælderens bredde er 700px. Det betyder, at den samlede bredde af elementerne er:

200px * 4 = 800px

Denne bredde er 100px større end forælderens bredde. Lad os beregne, hvor meget der skal fjernes fra hvert element, for at elementerne kan passe inde i deres forælder:

100px / 4 = 25px

Det vil sige, at elementernes bredde vil være:

200px - 25px = 175px

Implementer de beskrevne blokke og kontroller med måling, at elementernes bredde virkelig er lig med den, vi har beregnet.

Beregn blokkenes bredde, og kontroller derefter beregningerne med en måling:

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