La propiedad Style flexShrink en HTML DOM se usa para establecer cómo se puede reducir el elemento específico en relación con los elementos flexibles restantes dentro del contenedor.
Sintaxis:
- Se utiliza para devolver la propiedad flexShrink.
object.style.flexShrink
- Se utiliza para establecer la propiedad flexShrink.
object.style.flexShrink = "number|initial|inherit"
Valores de propiedad:
- Número: se utiliza para establecer un número que especifica cuánto artículo se puede encoger en relación con los artículos flexibles restantes. Su valor por defecto es 0.
- initial: establece la propiedad flexShrink en su valor predeterminado.
- heredar: el valor de esta propiedad se hereda de su elemento padre.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style flexShrink Property
</title>
<style>
#Geeks {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#Geeks div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
</style>
</head>
<body>
<h4>Click the button</h4>
<button onclick="GFG()">Click Here!
<br>
</button>
<p></p>
<div id="Geeks">
<div style="background-color:#64c962;
color:white;">
GeeksForGeeks1
</div>
<div style="background-color:#2c932a;
color:white;"
id="Geeks2">
GeeksForGeeks2
</div>
</div>
<script>
function GFG() {
// Safari 6.1+
document.getElementById(
"Geeks2").style.WebkitFlexShrink = "5";
document.getElementById(
"Geeks2").style.flexShrink = "5";
}
</script>
</body>
</html>
Producción:
Ejemplo-2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style flexShrink Property
</title>
<style>
#Geeks {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#Geeks div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
</style>
</head>
<body>
<h3>The flex-shrink Property</h3>
<div id="Geeks">
<div style="background-color:#44cc3f;">
</div>
<div style="background-color:#34a030;">
</div>
<div style="background-color:#2c932a;">
</div>
<div style="background-color:#267023;">
</div>
<div style="background-color:#175415;">
</div>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM HashChangeEvent se enumeran a continuación:
- Google Chrome 5.0
- Internet Explorer 8.0
- Firefox 3.6
- Ópera 10.6
- Safari 5.0
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA