Atributo flex-grow de CSS

Recomendaciones de cursos:

Definición y uso

Atributo flexGrow: especifica la cantidad de crecimiento del proyecto en comparación con los demás proyectos en el mismo contenedor.Comentarios:

Si el elemento no es un proyecto flexible, el atributo flex es inválido.

Vea también: Tutorial de CSS:

Atributo flex-shrinkCuadro flexible de CSS

Atributo flex-shrinkAtributo flex

Atributo flex-shrinkAtributo flex-basis

Atributo flex-shrinkAtributo flex-direction

Atributo flex-shrinkAtributo flex-flow

Atributo flex-shrinkManual de referencia de CSS:

Atributo flex-wrapManual de referencia de HTML DOM:

Atributo flexGrow

Ejemplo

Haga que el ancho del segundo proyecto flexible sea tres veces el de los demás proyectos flexibles:
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}

div:nth-of-type(3) {flex-grow: 1;}

Pruebe usted mismo

Sintaxis de CSS Descripciónflex-grow:

|initial|inherit;

Valor del atributo Valor
Descripción number
Establezca este atributo en su valor predeterminado. Ver: Valor numérico, que especifica la cantidad de crecimiento del proyecto en comparación con los demás proyectos flexibles. El valor predeterminado es 0. Establezca este atributo en su valor predeterminado. Ver:Atributos relacionados con la animación
Hereda este atributo del elemento padre. Ver: initial Hereda este atributo del elemento padre. Ver:Atributos relacionados con la animación

inherit

Detalles técnicos Valor predeterminado:
0 Herencia:
No Producción de animación:Compatibilidad. Consulte:Atributos relacionados con la animación
。 Versión:
CSS3 Sintaxis de JavaScript:

object.style.flexGrow="5"

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0