Proprietà flex-shrink

La proprietà flex-shrink determina quanto un blocco flex si ridurrà rispetto agli elementi adiacenti all'interno del contenitore flex in caso di mancanza di spazio libero.

Ad esempio, se tutti i blocchi flex all'interno del contenitore flex hanno flex-shrink:1, allora avranno la stessa dimensione. Se uno di essi ha flex-shrink:2, sarà 2 volte più piccolo di tutti gli altri.

Si applica a: un singolo blocco flex.

Questa proprietà è inclusa come parte della proprietà shorthand flex.

Sintassi

selettore {
	flex-shrink: numero positivo;
}

Valore predefinito: 1.

Esempio

Supponiamo di avere 3 elementi. La larghezza di ciascuno di essi è 200px e complessivamente è 600px, che è maggiore della larghezza del contenitore genitore, che è 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;
}

Calcoliamo lo spazio libero negativo con la formula:

600px - 350px = 250px

La larghezza ponderata totale degli elementi tenendo conto dei valori della proprietà flex-shrink per ciascun elemento sarà:

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

Ora determiniamo quanto si ridurrà il primo elemento:

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

Il secondo elemento:

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

Il terzo elemento:

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

Risulta che il terzo elemento, il cui valore flex-shrink è 3, si ridurrà più degli altri elementi.

Vedi anche

la proprietà flex-direction,
che imposta la direzione degli assi dei blocchi flex
la proprietà justify-content,
che imposta l'allineamento lungo l'asse principale
la proprietà align-items,
che imposta l'allineamento lungo l'asse trasversale
la proprietà flex-wrap,
che imposta la multilinea dei blocchi flex
la proprietà flex-flow,
shorthand per flex-direction e flex-wrap
la proprietà order,
che imposta l'ordine dei blocchi flex
la proprietà align-self,
che imposta l'allineamento di un singolo blocco
la proprietà flex-basis,
che imposta la dimensione di un specifico blocco flex
la proprietà flex-grow,
che imposta l'"ingordigia" dei blocchi flex
la proprietà flex,
shorthand per flex-grow, flex-shrink e flex-basis