Crecimiento

Uno de los aspectos más importantes de flexbox es entender el crecimiento/decrecimiento de un ítem. Este crecimiento va a estar condicionado por el tamaño de sus hermanos, entendiendo por hermanos aquellos ítems que están dentro del mismo contenedor. Si el ítem está solo dentro de un contenedor, no dependerá de ningún otro elemento.

Las propiedades relacionadas con el crecimiento/decrecimiento son:

• flex-grow
• flex-shrink
• flex-basis

Todas ellas se pueden resumir en una única propiedad: flex.

Terminología en inglés

• grow: crecer
• shrink: decrecer

flex-grow

Esta propiedad define cómo se distribuye el espacio restante de un contenedor entre los ítems. Es decir, define la posibilidad de un ítem a crecer si es necesario.

Acepta valores numéricos que se interpretan como proporciones. Los valores negativos no son válidos. El valor predeterminado es 0.

flex-grow: 0; /* por defecto */
flex-grow: 1;
flex-grow: 2;

Por ejemplo, si todos los elementos tienen valor 1 para flex-grow, el espacio restante se deber repartir equitativamente entre todos los ítems.

Por ejemplo, si todos los elementos tienen valor 1 y uno tiene valor 2, el espacio restante se repartirá de forma proporcional de tal forma que el elemento que tiene valor 2 ocupará el doble de espacio que los que tienen valor 1.

flex-shrink

Esta propiedad define la posibilidad de un ítem a decrecer si es necesario.

Acepta valores numéricos que se interpretan como proporciones. Los valores negativos no son válidos. El valor predeterminado es 1.

flex-shrink: 1; /* por defecto */
flex-shrink: 3;

Cuando el valor de todos los elementos es 1 (que el valor predeterminado), todos los elementos encogerán proporcionalmente. Si, por ejemplo, hay uno que tiene asingnado un valor 2, encogerá el doble que el resto de sus hermanos.

flex-basis

Los elementos tienen un tamaño definido y, con el espacio restante, se realiza la distribución. Con la propiedad flex-basis, indicamos cuál es el tamaño original de un ítem antes de crecer o decrecer.

flex-basis: auto; /* por defecto */
flex-basis: 0;
flex-basis: 100px;
flex-basis: content;

flex

La propiedad flex reúne las tres propiedades en una única propiedad. Se deben indicar en el siguiente orden:

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

Los dos últimos valores son opcionales, es decir, flex-shrink y flex-basis son opcionales.

El valor predeterminado es el mismo que el de sus propiedades particulares:

flex: 0 1 auto;

La línea anterior es equivalente al siguiente bloque:

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto; 

Algunos valores posibles son:

flex: none;
flex: 1 1 auto;
flex: 1 1 200px;

Recomendación

Se recomienda utilizar la propiedad flex en lugar de las tres propiedades individuales, ya que ésta permite establecer en una única línea todos los comportamientos (crecimiento, decrecimiento y tamaño base).