Como funcionam as propriedades flex-grow e…

O flex-grow determina até que ponto um elemento pode crescer na presença de espaço livre no contêiner. Um valor de 0 (padrão) significa que o elemento não crescerá. Valores positivos indicam um coeficiente de crescimento em relação a outros elementos flex na mesma linha.

flex-shrink determina até que ponto um elemento pode encolher em caso de falta de espaço livre no contêiner. Um valor de 1 (padrão) significa que pode encolher. Um valor de 0 impede a encolha. Valores positivos indicam um coeficiente de encolhimento em relação a outros elementos flex.

Vamos ver um exemplo:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Largura do contêiner */
}

.item {
  flex-basis: 100px; /* Tamanho base de cada elemento */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Vai ocupar 1 parte do espaço livre */
  flex-shrink: 0; /* Não vai encolher */
}

.item-2 {
  flex-grow: 2; /* Vai ocupar 2 partes do espaço livre */
  flex-shrink: 1; /* Pode encolher */
}

.item-3 {
  flex-grow: 1; /* Vai ocupar 1 parte do espaço livre */
  flex-shrink: 1; /* Pode encolher */
}

Neste caso, o tamanho base total dos elementos é de 300px (3 * 100px). O espaço livre é de 100px (400px - 300px). Este espaço será distribuído entre os elementos 1, 2 e 3 na proporção de seus flex-grow: 1 + 2 + 1 = 4. O elemento 1 receberá 1/4 * 100px = 25px de espaço adicional. O elemento 2 receberá 2/4 * 100px = 50px de espaço adicional. O elemento 3 receberá 1/4 * 100px = 25px de espaço adicional.

Se a largura do contêiner fosse insuficiente (por exemplo, 200px), seria necessário encolher. Em caso de falta de espaço para encolher, consideram-se flex-shrink e o tamanho dos elementos. O espaço que falta é distribuído para encolher entre os elementos cujo flex-shrink é maior que 0, proporcionalmente ao seu flex-shrink multiplicado pelo tamanho atual (após considerar flex-basis). O algoritmo de encolhimento é um pouco mais complexo, mas a ideia principal é que os elementos com maior flex-shrink ou maior tamanho atual encolherão mais.

É importante lembrar que flex-basis, flex-grow e flex-shrink são frequentemente usados juntos como a propriedade abreviada flex. Por exemplo, flex: 1 1 auto; é equivalente a flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Prioridade na distribuição do espaço:

flex-basis: Define o tamanho inicial do elemento.
flex-grow: Distribui o espaço livre positivo.
flex-shrink: Distribui o espaço livre negativo (necessidade de encolhimento).

Como funcionam as propriedades flex-grow e flex-shrink?