La propiedad flex-shrink

La propiedad flex-shrink define cuánto se reducirá un bloque flex en relación con los elementos adyacentes dentro del contenedor flex en caso de falta de espacio libre.

Por ejemplo, si todos los bloques flex dentro del contenedor flex tienen flex-shrink:1, entonces serán del mismo tamaño. Si uno de ellos tiene flex-shrink:2, entonces será 2 veces más pequeño que todos los demás.

Se aplica a: un bloque flex específico.

Esta propiedad forma parte de la propiedad abreviada flex.

Sintaxis

selector {
	flex-shrink: número positivo;
}

Valor por defecto: 1.

Ejemplo

Supongamos que tenemos 3 elementos. El ancho de cada uno de ellos es de 200px y en total es igual a 600px, que es mayor que el ancho del contenedor principal, que es igual a 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;
}

Calculemos el espacio libre negativo usando la fórmula:

600px - 350px = 250px

El ancho ponderado total de los elementos teniendo en cuenta los valores de la propiedad flex-shrink para cada elemento será igual a:

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

Ahora determinemos cuánto se reducirá el primer elemento:

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

El segundo elemento:

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

El tercer elemento:

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

Resulta que el tercer elemento, cuyo valor flex-shrink es igual a 3, se reducirá más que los otros elementos.

Véase también

la propiedad flex-direction,
que establece la dirección de los ejes de los bloques flex
la propiedad justify-content,
que establece la alineación a lo largo del eje principal
la propiedad align-items,
que establece la alineación a lo largo del eje transversal
la propiedad flex-wrap,
que establece la multibanda de los bloques flex
la propiedad flex-flow,
abreviatura para flex-direction y flex-wrap
la propiedad order,
que establece el orden de los bloques flex
la propiedad align-self,
que establece la alineación de un bloque individual
la propiedad flex-basis,
que establece el tamaño de un bloque flex específico
la propiedad flex-grow,
que establece la "codicia" de los bloques flex
la propiedad flex,
abreviatura para flex-grow, flex-shrink y flex-basis