Lățimea diferită a elementelor și compresibilitatea blocurilor flex în CSS

Să presupunem acum că elementele noastre au lățimi diferite. În acest caz, porțiunea detașată va fi proporțională cu lățimea acelui element și va fi calculată conform următoarei formule: spațiu liber negativ * (lățimea elementului / suma tuturor lățimilor elementelor).

Să presupunem că avem 4 elemente. Să presupunem că lățimea primului element este 400px, lățimea elementelor rămase - 200px, iar lățimea părintelui 900px.

Lățimea totală a elementelor este:

400px + 3 * 200px = 1000px

Atunci spațiul liber negativ va fi egal cu:

1000px - 900px = 100px

Să aflăm cât se va detașa de la primul element:

100px * (400px / 1000px) = 40px

Adică lățimea sa va fi egală cu:

400px - 40px = 360px

Să aflăm cât se va detașa de la fiecare dintre celelalte elemente:

100px * (200px / 1000px) = 20px

Adică lățimea acestor elemente va fi egală cu:

200px - 20px = 180px

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: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}