Características flex-grow en CSS

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 inicial0
Aplicado aElementos flexibles.
HeredableNo
Móvil
Valor calculadoComo 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ísticaChromeFirefoxIEÓperaSafari
Soporte básico29,020,01112,59.0

Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit--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-basisflex-directionflex-flowflex-shrinkflex-wrap.
  • La página de cada una de las propiedades widthheight 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.