La propiedad flex-shrink especifica cuánto se encogerá el elemento en comparación con otros elementos dentro de ese contenedor. Define la capacidad de un elemento para encogerse en comparación con los otros elementos que se colocan dentro del mismo contenedor.
Nota: Si el artículo en el contenedor no es un artículo flexible, la propiedad de contracción flexible no afectará ese artículo.
Sintaxis:
flex-shrink: number| initial| inherit;
Valor por defecto:
- 1
Valores de propiedad:
- número: un número que define cómo se reducirá el artículo en comparación con otros artículos flexibles.
- initial: Establece el valor a su valor por defecto.
- heredar: Hereda la propiedad de sus elementos padres.
Ejemplo: aquí vamos a ver que en un solo contenedor hay 5 div, aplicaremos el flex-shrink en el 2.º div y ese div se reducirá en comparación con otros 4 div. Podemos aplicar flex-shrink en cualquier documento en el mismo contenedor y ese div se reducirá en comparación con el ancho de otro div, flex-shrink reducirá ese div en comparación con otros elementos en ese contenedor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS | flex-shrink Property
</title>
<style>
#main {
width: 450px;
height: 200px;
border: 1px solid black;
display: -webkit-flex;
display: flex;
color: white;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
<!-- shrinking the 2nd div compare to others -->
#main div:nth-of-type(2) {
flex-shrink: 4;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-shrink:number</h3>
<!-- Making 5 divs in main -->
<div id="main">
<div style="background-color:#009900;">
<p>
A number specifying how much the item
will shrink relative to the rest of the
flexible items.
</p>
</div>
<div style="background-color:#00cc99;">
<p> Default value is 1</p>
</div>
<div style="background-color:#0066ff;">
<p>
Initial Sets this property to
its default value
</p>
</div>
<div style="background-color:#66ffff;;"></div>
<div style="background-color:#660066;">
<p>
Inherits this property from
its parent element
</p>
</div>
</div>
</body>
</html>
Producción:
Navegador compatible: el navegador compatible con CSS | Las propiedades flex-shrink se enumeran a continuación:
- Google Chrome 29.0
- Internet Explorer 11.0
- MozillaFirefox 28.0
- Ópera 17.0
- Safari 9.0
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA