คุณสมบัติ HTML DOM Style flexShrink ใช้เพื่อกำหนดสัดส่วนโดยที่องค์ประกอบจะย่อขนาดเมื่อเทียบกับพี่น้องภายในองค์ประกอบแบบยืดหยุ่น
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ flexShrink -
object.style.flexShrink = "number|initial|inherit"
ในที่นี้ “ตัวเลข” ระบุว่าองค์ประกอบจะหดตัวตามสัดส่วนขององค์ประกอบอื่นๆ เท่าใด และค่าเริ่มต้นของมันคือ 0 “ค่าเริ่มต้น” จะตั้งค่าคุณสมบัติเป็นค่าเริ่มต้น ในขณะที่ “สืบทอด” จะตั้งค่าเป็นค่าคุณสมบัติหลัก
ให้เราดูตัวอย่างคุณสมบัติ flexShrink -
ตัวอย่าง
<!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> ผลลัพธ์
เมื่อคลิก “เปลี่ยนการหดตัวแบบยืดหยุ่น ปุ่ม −
