Reglarea comprimării blocurilor flex în CSS

Implicit, de la toate elementele se ciupesc bucăți proporționale cu lățimea elementului. Totuși, se poate face astfel încât de la unele elemente să se cipească bucăți mai mari sau mai mici. Pentru aceasta există o proprietate specială flex-shrink.

Această proprietate reprezintă o anumită greutate, cu care va fi înmulțită lățimea elementului la calcularea bucății ciupite conform formulei de mai sus. De exemplu, dacă lățimea elementului este 200px, iar flex-shrink acestuia este 3, atunci lățimea ponderată (adică înmulțită cu greutatea) elementului va fi:

200px * 3 = 600px

Formula cu considerarea flex-shrink va avea următoarea formă: spațiu liber negativ * (lățimea ponderată a elementului / suma tuturor lățimilor ponderate ale elementelor).

Să vedem un exemplu. Să presupunem că avem 4 elemente. Lățimea primului element să fie 400px, iar flex-shrink acestuia să fie 2, lățimea elementelor rămase - 200px, iar flex-shrink al acestora să fie 1. Lățimea părintelui să fie 900px.

Lățimea totală a elementelor este:

400px + 3 * 200px = 1000px

Spațiul liber negativ va fi:

1000px - 900px = 100px

Lățimea ponderată totală a elementelor este:

400px * 2 + 200px * 1 + 200px * 1 + 200px * 1 = 1400px

Lățimea ponderată a primului element este:

400px * 2 = 800px

De la primul element se va ciupi următoarea bucată:

100px * (800px / 1400px) = 100px * 0.57 = 57.14px

Lățimea elementului va fi:

400px - 57.14px = 342.86px ~ 343px

Lățimea ponderată a fiecăruia dintre celelalte elemente este:

200px * 1 = 200px

De la fiecare element se va ciupi următoarea bucată:

100px * (200px / 1400px) = 100px * 0.142 = 14.2px

Lățimea elementului va fi:

200px - 14.2px = 185.8px ~ 186px

Realizaț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;
	flex-shrink: 2;
}
.elem2 {
	width: 100px;
	flex-shrink: 1;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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;
	flex-shrink: 3;
}
.elem2 {
	width: 100px;
	flex-shrink: 2;
}
.elem3 {
	width: 100px;
	flex-shrink: 1;
}

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 class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-shrink: 3;
}
.elem2 {
	width: 200px;
	flex-shrink: 2;
}
.elem3 {
	width: 200px;
	flex-shrink: 1;
}
.elem4 {
	width: 200px;
	flex-shrink: 1;
}