Factorul de compresie al blocurilor flex în CSS

În lecția precedentă am aflat că, atunci când elementelor flex le lipsește spațiu, ele încep să se comprime. Spațiul liber cu care suma lățimilor depășește lățimea părintelui se numește spațiu liber negativ.

Din punct de vedere tehnic, comprimarea înseamnă că de la lățimea fiecărui element se decupează o bucățică de lățime astfel încât toate elementele să încapă în părintele lor.

Să facem un calcul. Să presupunem, de exemplu, că avem 4 elemente cu lățimea de 200px. Să presupunem că lățimea părintelui este de 700px. Rezultă că lățimea totală a elementelor este:

200px * 4 = 800px

Această lățime este cu 100px mai mare decât lățimea părintelui. Să calculăm cât de la fiecare element trebuie să tăiem, pentru ca elementele să încapă în părintele lor:

100px / 4 = 25px

Adică lățimea elementelor va fi:

200px - 25px = 175px

Implementați blocurile descrise și verificați prin măsurare, că lățimea elementelor va fi într-adevăr egală cu cea calculată de noi.

Calculați lățimea blocurilor, apoi verificați calculele prin măsurare:

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