W3docs
es
Iniciar sesión

Propiedad CSS flex-grow

La propiedad flex-grow define cuánto crecerá el elemento. Consulta sus valores y prueba algunos ejemplos.

La propiedad flex-grow controla cuánto crece un elemento flex para ocupar el espacio libre restante dentro de su contenedor flex. El valor es un factor de crecimiento sin unidad, no una longitud: responde a la pregunta "cuando hay espacio extra, ¿qué parte de él debe tomar este elemento?"

Cuando cada elemento tiene un factor flex-grow, el espacio sobrante se divide proporcionalmente entre esos factores. El tamaño principal de un elemento flex es su anchura o su altura, dependiendo de la flex-direction: en una fila los elementos crecen horizontalmente, en una columna crecen verticalmente.

Esta propiedad es una de las propiedades CSS3. Normalmente se usa junto con flex-shrink (cómo se reducen los elementos cuando el espacio es insuficiente) y flex-basis (su tamaño inicial), y las tres se suelen establecer a la vez mediante la abreviación flex.

Cómo se distribuye el espacio libre

El algoritmo flex se ejecuta en dos pasos:

  1. Distribuir cada elemento según su flex-basis (o su tamaño de contenido si flex-basis: auto).
  2. Medir el espacio libre — el tamaño principal del contenedor menos la suma de esos tamaños base — y repartirlo en proporción al factor flex-grow de cada elemento.

Si los elementos anteriores empiezan con anchura casi cero y el contenedor tiene, digamos, 600px de espacio libre con factores 1, 2, 1, 1, 1 (total 6), cada unidad vale 600 / 6 = 100px. El elemento con factor 2 recibe 200px de crecimiento, mientras que cada elemento con factor 1 recibe 100px. Duplicar el factor duplica la parte del espacio extra, pero no hace que un elemento sea el doble de ancho en total.

Información

flex-grow solo tiene efecto cuando hay espacio libre y los elementos son elementos flex reales (el padre tiene display: flex o display: inline-flex). Sin espacio libre, o sin elementos flex, no tiene ningún efecto.

Valor inicial0
Se aplica aElementos flex, incluyendo pseudoelementos en flujo.
HeredableNo.
AnimableSí. Los elementos son animables.
VersiónCSS3
Sintaxis DOMobject.style.flexGrow = 3;

Sintaxis

Sintaxis de la propiedad CSS flex-grow

flex-grow: number | initial | inherit;

Ejemplo de la propiedad flex-grow:

Ejemplo de la propiedad CSS flex-grow con valor numérico

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 2px solid #cccccc;
        display: flex;
      }
      .box div:nth-of-type(1) {
        flex-grow: 1;
      }
      .box div:nth-of-type(2) {
        flex-grow: 2;
      }
      .box div:nth-of-type(3) {
        flex-grow: 1;
      }
      .box div:nth-of-type(4) {
        flex-grow: 1;
      }
      .box div:nth-of-type(5) {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <h2>Flex-grow property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Resultado

Propiedad CSS flex-grow

Ejemplo de la propiedad flex-grow con un factor de crecimiento mayor:

Propiedad CSS flex-grow con un número como valor

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 2px solid #cccccc;
        display: flex;
      }
      .box div:nth-of-type(1) {
        flex-grow: 1;
      }
      .box div:nth-of-type(2) {
        flex-grow: 6;
      }
      .box div:nth-of-type(3) {
        flex-grow: 1;
      }
      .box div:nth-of-type(4) {
        flex-grow: 1;
      }
      .box div:nth-of-type(5) {
        flex-grow: 1;
      }
    </style>
  </head>
  <body>
    <h2>Flex-grow property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Usar flex-grow dentro de la abreviación flex

Rara vez se escribe flex-grow por sí solo. El patrón más común es flex: 1, que es la abreviación de flex-grow: 1; flex-shrink: 1; flex-basis: 0. Establecer la base en 0 le indica al navegador que ignore el tamaño del contenido y divida el contenedor completo proporcionalmente, de modo que varios elementos con flex: 1 acaben con exactamente la misma anchura:

.item {
  flex: 1; /* grow:1  shrink:1  basis:0  → equal columns */
}

Para que un elemento tome el doble de espacio que los demás, aumenta su factor de crecimiento:

.sidebar { flex: 1; }
.main    { flex: 2; } /* gets 2/3 of the space, sidebar gets 1/3 */

Errores comunes

  • Factor, no anchura. flex-grow: 2 no significa "el doble de ancho" — significa "el doble de la parte del espacio sobrante." Cuando los elementos tienen tamaños de contenido diferentes, las anchuras finales no serán una proporción exacta de 2:1 a menos que flex-basis sea 0.
  • Los valores negativos no son válidos. Se ignoran y la propiedad conserva su valor anterior.
  • Sin espacio libre, sin efecto. Si los elementos ya llenan (o desbordan) el contenedor, flex-grow no cambia nada — ese caso lo gestiona flex-shrink.
  • El factor no tiene unidad. No escribas flex-grow: 2px; ese no es un valor válido.

Valores

ValorDescripciónPruébalo
numberEspecifica cuánto crecerá el elemento en relación con el resto de los elementos flexibles del mismo contenedor. El valor predeterminado es 0.Pruébalo »
initialEstablece la propiedad en su valor predeterminado.Pruébalo »
inheritHereda esta propiedad del elemento padre.

Práctica

Práctica
¿Cuál es la función de la propiedad 'flex-grow' en CSS?
¿Cuál es la función de la propiedad 'flex-grow' en CSS?
Was this page helpful?