flex-shrink

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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.

Ejemplo

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

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

must be provided

Valor inicial1
Applies toflex items, including in-flow pseudo-elements
Heredableno
Valor calculadocomo se especifica
Animation typea number

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

flex-shrink = 
<number [0,∞]>

Ejemplo

HTML

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

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

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

.box {
  flex-shrink: 1;
}

.box1 {
  flex-shrink: 2;
}

Result

must be provided

Especificaciones

Specification
CSS Flexible Box Layout Module Level 1
# flex-shrink-property

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-shrink

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Vea también