Komprimeringsfaktor for fleksblokker i CSS

I forrige leksjon fant vi ut at når flekselementer ikke har nok plass, begynner de å komprimeres. Mengden som den totale bredden er større enn forelderens bredde kalles negativt fritt rom.

Teknisk sett betyr komprimering at et stykke bredde skjæres av fra hvert elements bredde slik at alle elementene passer inn i sin forelder.

La oss gjøre noen beregninger. La oss for eksempel anta at vi har 4 elementer med en bredde på 200px. La oss si at forelderens bredde er 700px. Dette betyr at den totale bredden på elementene er:

200px * 4 = 800px

Dette er 100px mer enn forelderens bredde. La oss beregne hvor mye som må skjæres av fra hvert element for at elementene skal passe inn i sin forelder:

100px / 4 = 25px

Det vil si at bredden på elementene vil være:

200px - 25px = 175px

Implementer de beskrevne blokkene og bekreft med måling at bredden på elementene faktisk er lik den vi har beregnet.

Beregn bredden på blokkene, og bekreft deretter beregningene med 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;
}