Thuộc tính HTML DOM Style flexShrink được sử dụng để đặt tỷ lệ phần tử thu nhỏ kích thước của nó so với các anh chị em của nó bên trong phần tử flex.
Sau đây là cú pháp cho -
Đặt thuộc tính flexShrink -
object.style.flexShrink = "number|initial|inherit"
Ở đây, “number” chỉ định mức độ thu nhỏ của phần tử tương ứng với các phần tử khác và giá trị mặc định của nó là 0. “Giá trị ban đầu” đặt giá trị thuộc tính thành giá trị mặc định trong khi “inherit” đặt nó thành giá trị thuộc tính mẹ.
Chúng ta hãy xem một ví dụ cho thuộc tính flexShrink -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
}
#demo {
width: 500px;
height: 30px;
display: flex;
text-align: center;
font-size: 1.2em;
line-height: 30px;
}
#demo div {
flex-basis: 120px;
}
</style>
<script>
function changeFlexShrink() {
document.getElementsByTagName("DIV")[4].style.flexShrink="3";
document.getElementById("Sample").innerHTML="The fourth element has been shrinked by 3x their counterparts";
}
</script>
</head>
<body>
<div id="demo">
<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>
<div>Fourth Div</div>
<div>Fifth Div</div>
</div>
<br>
<p>Change the 4th div shrink property in the above divs by clicking the below button</p>
<button onclick="changeFlexShrink()">Change Flex Shrink</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi tính năng co lại linh hoạt Nút ”-
