CSS flex blokų suspaudžiamumo faktorius

Ankstesnėje pamokoje išsiaiškinome, kad kai flex elementams trūksta vietos, jie pradeda suspausti. Tai, kiek bendras plotis didesnis už tėvinio elemento plotį, vadinama neigiama laisva erdve.

Techniškai suspaudimas reiškia, kad nuo kiekvieno elemento pločio atskeliamas pločio gabaliukas tokiu būdu, kad visi elementai tilptų į savo tėvą.

Atlikime tam tikrą skaičiavimą. Tarkime, pavyzdžiui, kad turime 4 elementus, kurių plotis 200px. Tarkime, kad tuo tarpu tėvo plotis yra 700px. Pasirodo, kad bendras elementų plotis yra:

200px * 4 = 800px

Šis plotis yra 100px didesnis už tėvo plotį. Apskaičiuokime, kiek reikia atskelti nuo kiekvieno elemento, kad elementai tilptų į savo tėvą:

100px / 4 = 25px

Tai yra, elementų plotis bus:

200px - 25px = 175px

Įgyvendinkite aprašytus blokus ir patikrinkite matavimu, kad elementų plotis tikrai būtų lygus mūsų apskaičiuotam.

Apskaičiuokite blokų plotį, o tada patikrinkite skaičiavimus matavimu:

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