Flex elementu saspiežamības faktors CSS

Iepriekšējā nodarbībā mēs noskaidrojām, ka, kad flex elementiem trūkst vietas, tie sāk saspiesties. To, cik kopējais platums ir lielāks par vecāka elementa platumu, sauc par negatīvo brīvo vietu.

Tehniski saspiešana nozīmē, ka no katra elementa platuma tiek atņemts neliels platuma daudzums tā, lai visi elementi ietilptu savā vecāka elementā.

Veiksim dažus aprēķinus. Pieņemsim, ka, piemēram, mums ir 4 elementi, kuru platums ir 200px. Pieņemsim, ka vecāka elementa platums ir 700px. Izrādās, ka kopējais elementu platums ir:

200px * 4 = 800px

Šis platums ir par 100px lielāks nekā vecāka elementa platums. Aprēķināsim, cik no katra elementa ir jāatņem, lai elementi ietilptu savā vecāka elementā:

100px / 4 = 25px

Tas nozīmē, ka elementu platums būs:

200px - 25px = 175px

Realizējiet aprakstītos blokus un pārbaudiet ar mērījumu, ka elementu platums patiešām būs vienāds ar mūsu aprēķināto.

Aprēķiniet bloku platumu un pēc tam pārbaudiet aprēķinus ar mērījumu:

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