Características flex-shrink en CSS

La propiedad flex-shrink en CSS establece el parámetro de contracción de un elemento flexible. Especifica cuánto espacio debe ocupar el elemento en un contenedor flexible en relación con el resto de los elementos, si el ancho predeterminado del elemento flexible es mayor que el contenedor.

Funciones flex-shrink css

Valor inicial	`1`
Aplicado a	Elementos flexibles.
Heredable	No
Móvil	Sí
Valor calculado	Como se especificó.

/* <number> número  */ 
flex-shrink: 2;
flex-shrink: 0.6;
/* Valores globales */ 
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

Ejemplos y aplicaciones en código

En el siguiente ejemplo, definimos la contracción de los elementos A, B y C usando la regla flex-shrink: 1, mientras que la contracción de los elementos D y E es igual a flex-shrink: 2. Observe cómo establecemos las dimensiones iniciales de los elementos usando la propiedad flex-basis.

<div id="content">
  <div class="box" style="background-color: salmon;"> A </div>
  <div class="box" style="background-color: lightblue;"> B </div>
  <div class="box" style="background-color: gold;"> C </div>
  <div class="box1" style="background-color: crimson;"> D </div>
  <div class="box1" style="background-color: lightgreen;"> E </div>
</div>

Código CSS:

#content {
  display: flex;
  width: 500px;
}
#content div {
  flex-basis: 120px;
  border: 3px solid rgba(0,0,0,.2);
  padding: 0.25em;
}
.box { 
  flex-shrink: 1;
}
.box1 { 
  flex-shrink: 2; 
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	29.0	20.0	11	12.5	9.0

Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-o -ms-).

Características generales

La propiedad acepta flex-shrink un valor único, que es un número sin uno.

<number>

Un entero positivo que especifica cómo se reduce un elemento flexible en relación con el resto de los elementos flexibles, el valor predeterminado es 1. No se pueden utilizar números negativos.

Estructura flex-shrink css

flex-shrink: <number>;

Consulte también

Propiedad flex Página La página de sub-propiedades que esta conjuntos de propiedades son: flex-basis, flex-direction, flex-flow, flex-grow y flex-wrap.
La página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.