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;
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

Especificaciones

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

Compatibilidad con navegadores

BCD tables only load in the browser

Vea también