Svojstvo flex-shrink

Svojstvo flex-shrink određuje to, koliko će se flex-blok smanjivati u odnosu na susedne elemente unutar flex-kontejnera u slučaju nedostatka slobodnog prostora.

Na primer, ako svi flex-blokovi unutar flex-kontejnera imaju flex-shrink:1, onda će oni biti jednake veličine. Ako jedan od njih ima flex-shrink:2, onda će on biti 2 puta manji od svih ostalih.

Primenjuje se na: konkretni flex blok.

Ovo svojstvo ulazi kao sastavni deo u skraćeno svojstvo flex.

Sintaksa

selektor {
	flex-shrink: pozitivan broj;
}

Podrazumevana vrednost: 1.

Primer

Neka imamo 3 elementa. Širina svakog od njih iznosi 200px i ukupno je jednaka 600px, što je više od širine roditeljskog kontejnera, koja iznosi 350px:

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

Hajde da izračunamo negativni slobodni prostor pomću formule:

600px - 350px = 250px

Zbirna ponderisana širina elemenata uzimajući u obzir vrednosti svojstva flex-shrink za svaki element će biti jednaka:

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

Sada određujemo koliko će se smanjiti prvi element:

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

Drugi element:

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

Treći element:

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

Ispada da će se treći element, kod koga vrednost flex-shrink iznosi 3, smanjiti više od ostalih elemenata.

Pogledajte takođe

svojstvo flex-direction,
koje zadaje pravac osa flex blokova
svojstvo justify-content,
koje zadaje poravnanje duž glavne ose
svojstvo align-items,
koje zadaje poravnanje duž poprečne ose
svojstvo flex-wrap,
koje višelinijskost flex blokova
svojstvo flex-flow,
skraćenica za flex-direction i flex-wrap
svojstvo order,
koje zadaje redosled flex blokova
svojstvo align-self,
koje zadaje poravnanje jednog bloka
svojstvo flex-basis,
koje zadaje veličinu konkretnog flex bloka
svojstvo flex-grow,
koje zadaje pohlepu flex blokova
svojstvo flex,
skraćenica za flex-grow, flex-shrink i flex-basis