CSS-i flex plokkide kokkusurustatavuse faktor

Eelmises õppetükis saime teada, et kui flex elementidel pole piisavalt ruumi, hakkavad need kokku tõmbuma. Seda, kui palju kogulaius on suurem vanema laiusest, nimetatakse negatiivseks vabaks ruumiks.

Tehniliselt tähendab kokkusurumine, et iga elemendi laiuselt võetakse ära laiusetükk nii, et kõik elemendid mahuksid oma vanemasse.

Teeme mõned arvutused. Oletame näiteks, et meil on 4 elementi laiusega 200px. Oletame, et vanema laius on 700px. See tähendab, et elementide kogulaius on:

200px * 4 = 800px

See laius on 100px suurem kui vanema laius. Arvutame, kui palju igast elemendist tuleb ära võtta, et elemendid mahuksid vanemasse:

100px / 4 = 25px

See tähendab, et elementide laius on:

200px - 25px = 175px

Realiseerige kirjeldatud plokid ja kontrollige mõõtmisega, kas elementide laius on tõepoolest võrdne meie poolt arvutatuga.

Arvutage plokkide laius ja seejärel kontrollige arvutusi mõõtmisega:

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