¿Para qué sirven las propiedades flex-grow, flex-shrink y flex-basis en los elementos Flexbox?

Las propiedades flex-grow, flex-shrink y flex-basis sirven para controlar cómo los elementos flexibles individuales (los hijos de un contenedor Flexbox) se dimensionan y gestionan el espacio disponible a lo largo del eje principal del contenedor. Se aplican directamente a los elementos, no al contenedor.

1. flex-basis (Base de flexión o tamaño ideal):
   • Propósito: Define el tamaño inicial o base de un elemento flexible antes de que se distribuya el espacio sobrante (a través de flex-grow) o se reste espacio si es necesario (a través de flex-shrink).
   • Valores: Puede ser una longitud (px, em, %), o la palabra clave auto (valor por defecto).
     • Con auto, el navegador mira la propiedad width o height del ítem (según la flex-direction) o, si no está definida, el tamaño de su contenido.
     • Un porcentaje se calcula en relación al tamaño del contenedor Flexbox en el eje principal.
   • Es el punto de partida para los cálculos de flexibilidad.
2. flex-grow (Factor de crecimiento):
   • Propósito: Especifica la capacidad que tiene un elemento flexible para crecer si hay espacio extra disponible en el contenedor Flexbox a lo largo del eje principal.
   • Valores: Es un número no negativo (sin unidad). El valor por defecto es 0, lo que significa que el ítem no crecerá para ocupar el espacio sobrante.
   • Cómo funciona: Si hay espacio sobrante, este se distribuye entre los elementos flexibles proporcionalmente a su valor de flex-grow. Por ejemplo, un elemento con flex-grow: 2 intentará crecer el doble que un elemento con flex-grow: 1, si ambos compiten por el mismo espacio extra.
3. flex-shrink (Factor de encogimiento):
   • Propósito: Especifica la capacidad que tiene un elemento flexible para encogerse si no hay suficiente espacio en el contenedor Flexbox para albergar a todos los elementos según su flex-basis (es decir, si el tamaño combinado de los elementos excede el tamaño del contenedor).
   • Valores: Es un número no negativo (sin unidad). El valor por defecto es 1, lo que significa que el ítem puede encogerse si es necesario.
   • Cómo funciona: Si el espacio es insuficiente, los elementos se encogen proporcionalmente a su valor de flex-shrink (el cálculo también considera su flex-basis). Un elemento con flex-shrink: 0 no se encogerá más allá de su tamaño base.

Propiedad Abreviada flex:

Estas tres propiedades se pueden (y a menudo se deben) establecer de forma concisa utilizando la propiedad abreviada flex:

flex: <flex-grow> <flex-shrink> <flex-basis>;

• Valor por defecto: flex: 0 1 auto; (no crece, puede encogerse, tamaño base automático).
• flex: 1;: Es un atajo común para flex: 1 1 0%; (o 0 en algunos contextos). El ítem crece y encoge según sea necesario, partiendo de un tamaño base nulo (distribuye el espacio proporcionalmente).
• flex: auto;: Equivale a flex: 1 1 auto;. El ítem puede crecer y encoger, partiendo de su tamaño base automático.
• flex: none;: Equivale a flex: 0 0 auto;. El ítem no crece ni se encoge; se mantiene en su tamaño base.