Características flex-grow en CSS

La propiedad flex-grow CSS establece el parámetro de estiramiento para un elemento flexible y define cuánto espacio debe ocupar el elemento dentro del contenedor flexible.

Funciones flex-grow css

Valor inicial	`0`
Aplicado a	Elementos flexibles.
Heredable	No
Móvil	Sí
Valor calculado	Como se especificó.

/* <número> valores numéricos */ 
flex-grow: 3;
flex-grow: 0.6;
/* valores globales */ 
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

Ejemplos y aplicaciones en código

En el siguiente ejemplo, definimos la expansión de los elementos A, B, C y F usando la regla flex-grow: 1, mientras que la expansión de los elementos D y E es igual a 2:

<div id="content">
  <div class="box" style="background-color: salmon;"> A </div>
  <div class="box" style="background-color: lightblue;"> B </div>
  <div class="box" style="background-color: gold;"> C </div>
  <div class="box1" style="background-color: crimson;"> D </div>
  <div class="box1" style="background-color: lightgreen;"> E </div>
  <div class="box" style="background-color: cadetblue;"> F </div>
</div>

Código CSS:

#content {
  display: flex;
}
div {
  padding: 0.25em;
}
.box {
  flex-grow: 1;
  border: 3px solid rgba(0,0,0,.2);
}
.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0,0,0,.2);
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	29,0	20,0	11	12,5	9.0

Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-o -ms-).

Características general

La propiedad acepta flex-grow un valor único, que es un número sin uno.

<number>

Un entero positivo que especifica qué tan extensible es uno de los elementos flexibles en relación con el resto de los elementos flexibles, el valor predeterminado es 0.

Estructura flex-grow css

flex-grow: <number>;

Consulte también

Página de sub-propiedades que esta conjuntos de propiedades son: flex-basis, flex-direction, flex-flow, flex-shrink y flex-wrap.
La página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.