¿Cómo funcionan las propiedades flex-grow y…

flex-grow determina cuánto puede crecer un elemento en presencia de espacio libre en el contenedor. Un valor de 0 (por defecto) significa que el elemento no crecerá. Los valores positivos indican un coeficiente de crecimiento en relación con otros elementos flex en la misma fila.

flex-shrink determina cuánto puede comprimirse un elemento en caso de falta de espacio libre en el contenedor. Un valor de 1 (por defecto) significa que puede comprimirse. Un valor de 0 prohíbe la compresión. Los valores positivos indican un coeficiente de compresión en relación con otros elementos flex.

Veamos un ejemplo:

<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; /* Ancho del contenedor */
}

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

.item-1 {
  flex-grow: 1; /* Ocupa 1 parte del espacio libre */
  flex-shrink: 0; /* No se comprimirá */
}

.item-2 {
  flex-grow: 2; /* Ocupa 2 partes del espacio libre */
  flex-shrink: 1; /* Puede comprimirse */
}

.item-3 {
  flex-grow: 1; /* Ocupa 1 parte del espacio libre */
  flex-shrink: 1; /* Puede comprimirse */
}

En este caso, el tamaño base total de los elementos es de 300px (3 * 100px). El espacio libre es de 100px (400px - 300px). Este espacio libre se distribuirá entre los elementos 1, 2 y 3 en proporción a sus flex-grow: 1 + 2 + 1 = 4. El elemento 1 recibirá 1/4 * 100px = 25px de espacio adicional. El elemento 2 recibirá 2/4 * 100px = 50px de espacio adicional. El elemento 3 recibirá 1/4 * 100px = 25px de espacio adicional.

Sus tamaños finales serán: Elemento 1: 100px + 25px = 125px Elemento 2: 100px + 50px = 150px Elemento 3: 100px + 25px = 125px

Si el ancho del contenedor fuera insuficiente (por ejemplo, 200px), sería necesario comprimir. En caso de falta de espacio para comprimir, se consideran flex-shrink y el tamaño de los elementos. El espacio que falta se distribuye para comprimir entre los elementos cuyo flex-shrink es mayor que 0, en proporción a su flex-shrink multiplicado por su tamaño actual (después de considerar flex-basis). El algoritmo de compresión es un poco más complejo, pero la idea principal es que los elementos con mayor flex-shrink o mayor tamaño actual se comprimirán más.

Es importante recordar que flex-basis, flex-grow y flex-shrink a menudo se usan juntos como la propiedad abreviada flex. Por ejemplo, flex: 1 1 auto; es equivalente a flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Prioridad en la distribución del espacio:

flex-basis: Establece el tamaño inicial del elemento.
flex-grow: Distribuye el espacio libre positivo.
flex-shrink: Distribuye el espacio libre negativo (necesidad de compresión).

¿Cómo funcionan las propiedades flex-grow y flex-shrink?