Listado completo de tutoriales

68 - Flexbox - (flex-shrink aplicada a los items)


La segunda propiedad aplicada a los items de una caja flexible se llama "flex-shrink" y almacena un valor entero no negativo. Este valor representa un factor de encogimiento o contracción del item.

Cuando no hay más espacio para repartir en el Flexbox los items comienzan a contraerse para entrar en el contenedor.

El valor por defecto almacenando en la propiedad "flex-shrink" es el 1, esto quiere decir que cuando empezamos a reducir el ancho del contenedor los items se encogen en forma proporcional.

Si queremos que uno o más items no se encojan debemos asignarle a la propiedad "flex-shrink" el valor cero.

Probemos de asignar el valor 0 al segundo item:

Problema: Definir un Flexbox con tres items. Hacer que el segundo item no pueda encogerse empleando la propiedad "flex-shrink".

pagina1.html

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <div id="contenedor1">
    <div id="item1">Caja 1<br>Esto es una prueba de la propiedad flex-shrink</div>
    <div id="item2">Caja 2<br>Esto es una prueba de la propiedad flex-shrink</div>
    <div id="item3">Caja 3<br>Esto es una prueba de la propiedad flex-shrink</div>
  </div>
</body>
</html>

estilos.css

#contenedor1{
  display: flex;
  background-color: #000;  
  height: 300px;
  color:white;
  font-size:2rem;
}

#item1 {  
  background-color: #0078A6;
}
#item2 {
  flex-shrink: 0;
  background-color: #0084B6;
}
#item3 {
  background-color: #008CC1;
}

Solo al elemento #item2 le asignamos un valor 0 a la propiedad "flex-shrink", las otras almacenan un valor 1 y por lo tanto se pueden contraer:

  flex-shrink: 0;

Retornar