Proprietatea flex-shrink

Proprietatea flex-shrink determină mărimea cu care un bloc flex se va micșora relativ la elementele adiacente din interiorul containerului flex în cazul lipsei spațiului liber.

De exemplu, dacă toate blocurile flex din interiorul containerului flex au flex-shrink:1, atunci ele vor avea dimensiuni egale. Dacă unul dintre ele are flex-shrink:2, atunci acesta va fi de 2 ori mai mic decât toate celelalte.

Se aplică la: un bloc flex specific.

Această proprietate face parte ca o componentă a proprietății abreviate flex.

Sintaxă

selector {
	flex-shrink: număr pozitiv;
}

Valoare implicită: 1.

Exemplu

Să presupunem că avem 3 elemente. Lățimea fiecăruia dintre ele este de 200px și în total este egală cu 600px, ceea ce este mai mult decât lățimea containerului părinte, care este egală cu 350px:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

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

Să calculăm spațiul liber negativ conform formulei:

600px - 350px = 250px

Lățimea totală ponderată a elementelor ținând cont de valorile proprietății flex-shrink pentru fiecare element va fi egală cu:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Acum să determinăm cu cât se va micșora primul element:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Al doilea element:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Al treilea element:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Rezultă că al treilea element, pentru care valoarea flex-shrink este egală cu 3, se va micșora mai mult decât celelalte elemente.

Vedeți și

proprietatea flex-direction,
care stabilește direcția axelor blocurilor flex
proprietatea justify-content,
care stabilește alinierea de-a lungul axei principale
proprietatea align-items,
care stabilește alinierea de-a lungul axei transversale
proprietatea flex-wrap,
care stabilește multi-linia blocurilor flex
proprietatea flex-flow,
prescurtare pentru flex-direction și flex-wrap
proprietatea order,
care stabilește ordinea blocurilor flex
proprietatea align-self,
care stabilește alinierea unui singur bloc
proprietatea flex-basis,
care stabilește dimensiunea unui bloc flex specific
proprietatea flex-grow,
care stabilește "lăcomia" blocurilor flex
proprietatea flex,
prescurtare pentru flex-grow, flex-shrink și flex-basis