manual de referencia CSS

reglas CSS @

大全 de propiedades CSS

CSS3 flex-shrink atributo CSS3 flex-flow atributo

CSS3 flex-Uso y ejemplo del atributo grow

flex-El atributo grow CSS especifica el modo de crecimiento de un proyecto flex en comparación con otros proyectos dentro del contenedor flex.

La tabla a continuación proporciona una descripción de uso y un historial de versiones de este atributo, así como su sintaxis de uso en scripts de JavaScript.

Valor predeterminado:	0
Aplíquese a:	Elemento elástico
Herencia:	No
Animable:	es.Consulte Atributos de animación.
Versión:	CSS3nueva característica
Sintaxis de JavaScript:	object.style.flexGrow="1"

flex-Sintaxis de uso de grow

La sintaxis de este atributo es la siguiente:

flex-grow: número | initial | inherit

Los siguientes ejemplos muestran cómo usar flex-Atributo grow.

Ejemplo

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-grow:　1;　/*　Safari　6.1+　*/
　　　　flex-grow:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-grow:　3;　/*　Safari　6.1+　*/
　　　　flex-grow:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-grow:　5;　/*　Safari　6.1+　*/
　　　　flex-grow:　5;
}

Prueba a ver‹/›

Valores del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
number	Un número positivo utilizado para determinar el crecimiento del elemento elásticoCrecimiento elásticoCoeficiente. El valor predeterminado es 0. Los números negativos no son válidos.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, los elementos relacionados adoptan el flex del elemento padre-Valores del atributo grow.

Compatibilidad del navegador

flex-Compatibilidad del navegador para el atributo grow, los números en la tabla a continuación representan la versión mínima de los navegadores que admiten este atributo; todos los navegadores principales admiten este atributo.

	Firefox18+ ^-moz-,28+ Google Chrome 21+ ^-webkit-,29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Leer más

Consulte la siguiente guía:CSS3Diseño en columnas múltiples.

Atributos relacionados:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-shrink atributo CSS3 flex-flow atributo