La propiedad CSS flex-shrink especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número flex-shrink , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.

flex-shrink: 2;
flex-shrink: 0.6;

/* Valores globales */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

Valor inicial1
Applies toflex items, including in-flow pseudo-elements
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typea number
Canonical orderel orden único no-ambigüo definido por la gramática formal

 

Sintaxis

La propiedad flex-shrink se especifica como un único <número>.

Valores

<número>
Véase<number>. Los valores negativos no son válidos

Sintaxi formal

<number>

Ejemplo

HTML

<p>El ancho del contenido es de 500px; el flex-basis de los flex items es 120px.</p>
<p>A, B, C tiene flex-shrink:1. D y E tienen flex-shrink:2</p>
<p>El ancho de D y E es menor al de los otros.</p>
<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
</div>

CSS

#content {
  display: flex;
  width: 500px;
}

#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
}

.box { 
  flex-shrink: 1;
}

.box1 { 
  flex-shrink: 2; 
}

Result

Especificaciones

Especificación Estado Comentarios
CSS Flexible Box Layout Module
La definición de 'flex-shrink' en esta especificación.
Candidate Recommendation Definición inicial

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 29
Soporte completo 29
Soporte completo 21
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Soporte completo 20
Notas
Soporte completo 20
Notas
Notas Since Firefox 28, multi-line flexbox is supported.
Notas Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte 18 — 20
Deshabilitado
Deshabilitado From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Soporte completo 10
Notas
Soporte completo 10
Notas
Notas Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.
Opera Soporte completo 12.1
Soporte completo 12.1
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari Soporte completo 8
Prefijado
Soporte completo 8
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 4.4
Soporte completo 4.4
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 29
Soporte completo 29
Soporte completo 25
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Mobile Soporte completo Si
Soporte completo Si
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 20
Notas
Soporte completo 20
Notas
Notas Since Firefox 28, multi-line flexbox is supported.
Notas Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0.
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte 18 — 20
Deshabilitado
Deshabilitado From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 12.1
Soporte completo 12.1
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Vea también

Etiquetas y colaboradores del documento

Colaboradores en esta página: deluxury, Facundo-Corradini
Última actualización por: deluxury,