flex-shrink

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

<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

BCD tables only load in the browser

Vea también