Propiedad flex-shrink de CSS

La propiedad flex-shrink especifica cuánto se reducirá el elemento en relación con el resto de los elementos del contenedor flex. Si el tamaño de los elementos es mayor que el del contenedor, estos se reducirán para ajustarse al contenedor flex. Cuando la propiedad flex-shrink no se incluye en la declaración abreviada flex, su valor se establece en 1 por defecto. Si no hay elementos flexibles, la propiedad flex-shrink no tendrá ningún efecto.

La propiedad flex-shrink es una de las propiedades de CSS3.

INFO

El factor flex-shrink se multiplica por el flex-basis (o el tamaño del contenido del elemento si flex-basis es auto) cuando se distribuye el espacio negativo.

Valor inicial	1
Se aplica a	Elementos flex, incluidos pseudo-elementos en flujo.
Heredable	No.
Animable	Sí. Los elementos son animables.
Versión	CSS3
Sintaxis DOM	object.style.flexShrink = "4";

Sintaxis

Sintaxis de la propiedad flex-shrink de CSS

css

flex-shrink: number | initial | inherit;

Ejemplo de la propiedad flex-shrink:

Ejemplo de la propiedad flex-shrink de CSS con valor numérico

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: flex;
      }
      .box div {
        flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink property example</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad flex-shrink de CSS

Valores

Valor	Descripción	Probarlo
number	Especifica cuánto se reducirá el elemento en relación con el resto de los elementos flexibles del mismo contenedor. El valor predeterminado es 1.	Probarlo »
initial	Establece la propiedad en su valor predeterminado.	Probarlo »
inherit	Hereda esta propiedad de su elemento padre.

Práctica

¿Cuál es la función de la propiedad 'flex-shrink' en CSS?

Define la capacidad de un elemento flex para crecer si es necesario.Especifica la alineación entre las líneas dentro de un contenedor flexible cuando los elementos no utilizan todo el espacio disponible.Define la capacidad de un elemento flex para reducirse si es necesario.Permite controlar cómo se distribuye un contenedor flex a lo largo del eje transversal.Determina el orden en que se muestran y distribuyen los elementos flex dentro del contenedor flex.

Propiedad flex-shrink de CSS ​

Sintaxis ​

Ejemplo de la propiedad flex-shrink: ​

Resultado ​

Valores ​

Práctica ​

Propiedad flex-shrink de CSS

Sintaxis

Ejemplo de la propiedad flex-shrink:

Resultado

Valores

Práctica