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;


  
    
      flex-shrink:
      
        
          0.5
          
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at
              purus vitae ipsum hendrerit vulputate quis vitae risus.
          
        
        
          1
          
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at
              purus vitae ipsum hendrerit vulputate quis vitae risus.
          
        
        
          3
          
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at
              purus vitae ipsum hendrerit vulputate quis vitae risus.

html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: left;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em;
  font: 0.8em sans-serif;
  text-align: left;
  flex: 1;
  white-space: nowrap;
}

.container {
  background: #e4f0f5;
  margin-top: 0.5em;

  display: flex;
}

.item {
  border: 1px solid black;
  padding: 1em;
}

.small {
  flex-shrink: 0.5;
}
.mid {
  flex-shrink: 1;
}
.large {
  flex-shrink: 3;
}

Valor inicial	`1`
Applies to	flex items, including in-flow pseudo-elements
Heredable	no
Valor calculado	como se especifica
Animation type	a number

Sintaxis

La propiedad flex-shrink se especifica como un único .

Valores

: Véase. Los valores negativos no son válidos

Sintaxi formal

flex-shrink =

Ejemplo

HTML

html


  El ancho del contenido es de 500px; el flex-basis de los flex items es 120px.

A, B, C tiene flex-shrink:1. D y E tienen flex-shrink:2
El ancho de D y E es menor al de los otros.

  A
  B
  C
  D
  E

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

Vea también

CSS Flexbox Guide: Basic Concepts of Flexbox
CSS Flexbox Guide: Controlling Ratios of flex items along the main axis