¿Cómo se pueden cambiar de forma flexible los tamaños de los elementos que usan flexbox?

Se puede cambiar el tamaño de los elementos en flexbox de manera flexible usando las propiedades flex-grow, flex-shrink y flex-basis.

• flex-grow: Define cuánto puede estirarse un elemento, ocupando el espacio libre en el contenedor. El valor predeterminado es 0 (no se estira). Un valor más alto indica un mayor coeficiente de estiramiento en relación con otros elementos.
• flex-shrink: Define cuánto puede comprimirse un elemento en caso de falta de espacio libre. El valor predeterminado es 1 (se comprime). Un valor más alto indica un mayor coeficiente de compresión.
• flex-basis: Define el tamaño base del elemento antes de distribuir el espacio libre. Puede ser un valor fijo (px, %, rem) o una palabra clave (auto, content).

Estas tres propiedades a menudo se combinan en la propiedad abreviada flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Ejemplos de uso:

/* El elemento ocupará todo el espacio disponible */
.flex-item {
  flex-grow: 1;
}

/* El elemento no se comprimirá en caso de falta de espacio */
.flex-item {
  flex-shrink: 0;
}

/* El elemento tiene un tamaño base de 100px y se expande si hay espacio */
.flex-item {
  flex: 1 1 100px;
}

/* El elemento tiene un tamaño base definido por su contenido y puede comprimirse */
.flex-item {
  flex: 0 1 auto; /* Equivale a flex: initial; */
}

/* El elemento no se estira ni se comprime y tiene un tamaño base definido por su contenido */
.flex-item {
  flex: 0 0 auto; /* Equivale a flex: none; */
}

/* El elemento se estira, se comprime y tiene un tamaño base de 0 (útil para crear elementos de igual ancho) */
.flex-item {
  flex: 1 1 0; /* Equivale a flex: auto; */
}

El uso de estas propiedades permite gestionar con precisión el comportamiento de los elementos dentro de un contenedor flex al cambiar el tamaño de la pantalla o del contenido.