Manual de referencia de CSS

reglas de CSS @

大全 de Atributos CSS

CSS3 flex-Atributo wrap CSS3 flex-Atributo grow

CSS3 flex-Método de uso y ejemplo del atributo shrink

flex-El atributo shrink CSS especifica la forma de contracción del proyecto flex en comparación con otros proyectos dentro del contenedor flex.

La tabla a continuación describe las instrucciones de uso y el historial de versiones de este atributo, así como su sintaxis de uso en el script de JavaScript.

Valor predeterminado:	1
Adecuado para:	Elementos flexibles
Herencia:	No
Animable:	es.Consulte Atributos de animación.
Versión:	CSS3nueva característica
Sintaxis de JavaScript:	object.style.flexShrink="5"

flex-Sintaxis de uso de shrink

La sintaxis de este atributo es la siguiente:

flex-shrink: número | initial | inherit

Los siguientes ejemplos muestran cómo usar flex-Atributo shrink

Ejemplo

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

Prueba aquí‹/›

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 flex-El coeficiente de elasticidad del proyecto shrink. El valor predeterminado es1.Los números negativos no son válidos.
initial	Establezca este atributo en su valor predeterminado.
inherit	Si se especifica, los elementos asociados adoptan el flex del elemento padre-Valores del atributo shrink.

Compatibilidad del navegador

flex-La compatibilidad del navegador del atributo shrink, los números en la tabla a continuación indican la versión más baja del navegador que admite esta propiedad; todos los navegadores principales admiten esta propiedad.

	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 instrucción:CSS3Diseño de multicolumnas.

Propiedades relacionadas:align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-Atributo wrap CSS3 flex-Atributo grow