Propiedad CSS flex-shrink

La propiedad flex-shrink controla cuánto se reduce un elemento flex en relación con los demás elementos del mismo contenedor cuando no hay suficiente espacio para todos ellos en sus tamaños preferidos. Solo tiene efecto cuando el tamaño combinado de los elementos es mayor que el contenedor — ese desbordamiento es el "espacio negativo" que se distribuye reduciendo los elementos.

El valor es un número sin unidades (un factor flex), no una longitud. Un número mayor significa que un elemento cede más de su anchura (o altura, en una columna) que sus vecinos. El valor predeterminado es 1, por lo que de forma predeterminada todos los elementos flex se reducen al mismo ritmo. Establécelo en 0 para fijar un elemento en su flex-basis e impedir que se reduzca.

flex-shrink es el tercer valor en la abreviatura flex (flex: grow shrink basis) y es una de las propiedades CSS3.

Información

Cuando se distribuye el espacio negativo, el factor flex-shrink de cada elemento se multiplica por su flex-basis (o, cuando flex-basis es auto, por el tamaño del contenido del elemento). Esta ponderación hace que los elementos más grandes se reduzcan más que los pequeños incluso cuando sus factores de reducción son iguales — evita que un elemento pequeño colapse a nada mientras uno grande conserva su tamaño.

Cómo se calcula la reducción

Supongamos que un contenedor flex tiene 400px de anchura y contiene dos elementos cuyos valores flex-basis suman 600px — hay 200px de desbordamiento que absorber. Si ambos elementos tienen el mismo flex-basis de 300px y factores de reducción de 1 y 3, las partes ponderadas son 300×1 = 300 y 300×3 = 900, con un total de 1200. Cada elemento cede el desbordamiento en proporción a su parte:

El elemento A elimina 200 × (300 / 1200) = 50px → queda en 250px.
El elemento B elimina 200 × (900 / 1200) = 150px → queda en 150px.

Así, el elemento con flex-shrink: 3 pierde tres veces más anchura que el que tiene flex-shrink: 1. Las dos anchuras finales suman de nuevo los 400px del contenedor.

Cuándo usar flex-shrink

Proteger un elemento fijo. Asigna flex-shrink: 0 a una barra lateral, un logotipo o un icono para que conserve su tamaño mientras el contenido flexible a su alrededor se reduce.
Priorizar qué se reduce primero. Aumenta el factor en los elementos menos importantes para que colapsen antes que el contenido principal.
Crear barras de herramientas y barras de navegación flexibles. Permite que los botones se reduzcan juntos al estrecharse el viewport en lugar de desbordarse o saltar de línea. | Initial Value | 1 | |---|---| | Applies to | Flex items, including in-flow pseudo-elements. | | Inherited | No. | | Animatable | Yes. Items are animatable. | | Version | CSS3 | | DOM Syntax | object.style.flexShrink = "4"; |

Sintaxis

Sintaxis de la propiedad CSS flex-shrink

flex-shrink: number | initial | inherit;

Un número sin unidades establece el factor flex; initial lo restablece a 1 e inherit toma el valor del elemento padre.

Ejemplo de la propiedad flex-shrink

En el ejemplo siguiente, todos los elementos parten de un flex-basis de 100px (por lo que 500px de contenido compiten por una caja de 320px). El segundo elemento tiene flex-shrink: 7 mientras los demás tienen 3, por lo que se reduce más del doble de rápido y termina siendo el más estrecho.

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

Pruébalo tú mismo »

Resultado

![Propiedad CSS flex-shrink](/uploads/media/default/0001/05/b413d578abc6b2c3b0a052506081df9c0183e432.png "CSS flex-shrink property example" =420x)

Evitar que un elemento se reduzca

Establece flex-shrink: 0 para mantener un elemento en su base mientras sus hermanos absorben todo el desbordamiento. Aquí la barra lateral permanece en 200px de anchura y solo el área de contenido se reduce:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: flex;
        width: 320px;
        border: 1px dotted #666666;
      }
      .sidebar {
        flex-basis: 200px;
        flex-shrink: 0;        /* never shrinks */
        background-color: #1c87c9;
      }
      .content {
        flex-basis: 200px;
        flex-shrink: 1;        /* shrinks to make room */
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="sidebar">Sidebar</div>
      <div class="content">Content</div>
    </div>
  </body>
</html>

Las dos bases suman 400px en una caja de 320px, por lo que deben eliminarse 80px. Como la barra lateral se niega a reducirse, el área de contenido absorbe los 80px completos y se renderiza con 120px.

Valores

Valor	Descripción	Pruébalo
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.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda esta propiedad de su elemento padre.

Propiedades relacionadas

flex-shrink rara vez actúa sola — es la contraparte de las otras propiedades de tamaño de Flexbox:

flex-grow — cuánto crece un elemento para llenar el espacio extra (la dirección opuesta).
flex-basis — el tamaño inicial del elemento antes de aplicar el crecimiento o la reducción.
flex — la abreviatura que establece flex-grow, flex-shrink y flex-basis a la vez.
flex-wrap — cuándo los elementos pueden pasar a una nueva línea en lugar de reducirse.
flex-direction — si la reducción ocurre a lo largo de la fila (anchura) o la columna (altura).

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 usan 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 los elementos flex se muestran y distribuyen dentro del contenedor flex.