Propriedade flex-shrink

A propriedade flex-shrink define o quanto um bloco flex será reduzido em relação aos elementos vizinhos dentro do contêiner flex quando não houver espaço livre suficiente.

Por exemplo, se todos os blocos flex dentro de um contêiner flex têm flex-shrink:1, eles terão o mesmo tamanho. Se um deles tiver flex-shrink:2, ele será 2 vezes menor do que todos os outros.

Aplica-se a: um bloco flex específico.

Esta propriedade faz parte da propriedade abreviada flex.

Sintaxe

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

Valor padrão: 1.

Exemplo

Suponha que temos 3 elementos. A largura de cada um deles é de 200px e a soma é igual a 600px, o que é maior que a largura do contêiner pai, que é de 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;
}

Vamos calcular o espaço livre negativo usando a fórmula:

600px - 350px = 250px

A largura ponderada total dos elementos considerando os valores da propriedade flex-shrink para cada elemento será:

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

Agora vamos determinar o quanto o primeiro elemento será reduzido:

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

Segundo elemento:

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

Terceiro elemento:

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

Conclui-se que o terceiro elemento, cujo valor flex-shrink é 3, será reduzido mais do que os outros elementos.

Veja também

a propriedade flex-direction,
que define a direção dos eixos dos blocos flex
a propriedade justify-content,
que define o alinhamento ao longo do eixo principal
a propriedade align-items,
que define o alinhamento ao longo do eixo transversal
a propriedade flex-wrap,
que define a quebra de linha dos blocos flex
a propriedade flex-flow,
abreviação para flex-direction e flex-wrap
a propriedade order,
que define a ordem dos blocos flex
a propriedade align-self,
que define o alinhamento de um único bloco
a propriedade flex-basis,
que define o tamanho de um bloco flex específico
a propriedade flex-grow,
que define a "ganância" dos blocos flex
a propriedade flex,
abreviação para flex-grow, flex-shrink e flex-basis