4. Flex-grow
Flex-grow es la propiedad que permite que los flex-item crezcan.
De manera predeterminada los flex-item miden lo que puede medir según su contenido
Ejemplo 1
En este ejemplo podemos ver que los flex-item, por defecto, se adaptan al contenido que tienen ya que su flex grow por defecto es 0 flex-grow:0
Ejemplo 1.1
En este ejemplo ponemos flex-grow:1 a los flex-item y estos ocupan todo el ancho
disponible posible.
Todo el ancho posible es la parte turquesa del container.
flex-grow indica el factor de crecimiento. El navegador divide el espacio disponible
entre la cantidad de factores de crecimiento y se lo asigna a los items. Es decir si el espacio
disponible son 100px lo que hace es divide 100/5 y añade 20 más al total del item
En el siguiente ejemplo se ha aplicado un flex-grow:1 a los items 1, 3, 4 y 5 y un
flex-grow:4 al 2.
Ejemplo 1.2
El navegador lo que hace es sumar todos los valores de flex-grow para calcular el factor de crecimiento
- item 1 = 1
- item 2 = 4
- item 3 = 1
- item 4 = 1
- item 5 = 1
- Total = 8
Por lo tanto suponiendo que el espacio disponible fuese 100, el navegador divide 100 / 8 = 12,5
Teniendo el factor de crecimiento (12,5) el navegador lo multiplica por el valor de flex-grow en cada item (8) y lo suma:
- item 1 = 1 * 12,5 = 12,5
- item 2 = 4 * 12,5 = 50
- item 3 = 1 * 12,5 = 12,5
- item 4 = 1 * 12,5 = 12,5
- item 5 = 1* 12,5 = 12,5
- Total = 100
Por lo tanto el resultado de cada Item es lo que se le suma a su tamaño inicial para así llenar todo el espacio disponible.