Atributo flex-shrink de CSS
Definición y uso
El atributo flex-shrink está fijo en el mismo contenedor, la cantidad de contracción del proyecto en comparación con los demás proyectos elásticos.
Notas:Si el elemento no es un proyecto elástico, el atributo flex no es válido.
Vea también:
Tutorial de CSS: Cuadro elástico de CSS
Manual de referencia de CSS:Atributo flex
Manual de referencia de CSS:Atributo flex-basis
Manual de referencia de CSS:Atributo flex-direction
Manual de referencia de CSS:Atributo flex-flow
Manual de referencia de CSS:Atributo flex-grow
Manual de referencia de CSS:Atributo flex-wrap
Manual de referencia de HTML DOM:Atributo flexShrink
Ejemplo
Hacer que el segundo proyecto elástico se contraiga tres veces en comparación con los demás proyectos:
div:nth-of-type(2) {
flex-shrink: 3;
}
Sintaxis de CSS
flex-shrink: number|initial|inherit;
Valor del atributo
| Valor | Descripción |
|---|---|
| number | Número, que especifica la cantidad de contracción del proyecto en comparación con los demás proyectos elásticos. El valor predeterminado es 1. |
| initial | Establece este atributo en su valor predeterminado. Ver initial. |
| inherit | Hereda este atributo del elemento padre. Ver inherit. |
Detalles técnicos
| Valor predeterminado: | 1 |
|---|---|
| Herencia: | No |
| Producción de animación: | Admite. Consulte:Atributos relacionados con la animación. |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | object.style.flexShrink="5" |
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.
Los números con -webkit- o -moz- indican la primera versión que utiliza el prefijo.
| 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 |
