คุณสมบัติ HTML DOM Style flex ใช้สำหรับการตั้งค่าหรือส่งคืนความยาวที่ยืดหยุ่นสำหรับองค์ประกอบโดยตั้งค่าคุณสมบัติการแสดงผลเป็น flex มันถูกใช้เพื่อจัดการคุณสมบัติ flexGrow, flexShrink และ flexBasis
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติดิ้น -
object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"
ต่อไปนี้เป็นค่า -
| ค่า | คำอธิบาย |
|---|---|
| flex-grow | ขยายรายการโดยสัมพันธ์กับรายการยืดหยุ่นที่เหลือตามหมายเลข agiven |
| flex-shrink | ย่อขนาดรายการที่สัมพันธ์กับรายการแบบยืดหยุ่นที่เหลือตามจำนวน agiven ตัวเลขระบุจำนวนรายการที่จะหดตัวเมื่อเทียบกับส่วนที่เหลือของรายการที่มีความยืดหยุ่น |
| flex-basis | กำหนดความยาวของรายการและใช้หน่วยความยาวตามกฎหมายใดๆ |
| อัตโนมัติ | ตั้งค่าคุณสมบัติเฟล็กซ์สามรายการเป็น 1 1 อัตโนมัติ |
| ค่าเริ่มต้น | ตั้งค่าคุณสมบัติ flex เป็นค่าเริ่มต้นซึ่งเป็น 0 1 อัตโนมัติ |
| ไม่มี | Sameas 0 0 อัตโนมัติ |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
มาดูตัวอย่างคุณสมบัติ flex กัน −
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
width: 400px;
height: 80px;
display: flex;
}
#demo div {
flex: 1 3 auto;
}
div:nth-of-type(even){
box-shadow: inset 0 0 12px red;
}
div:nth-of-type(odd){
box-shadow: inset 0 0 12px blue;
}
</style>
<script>
function changeFlex() {
document.getElementsByTagName("DIV")[1].style.flex="none";
document.getElementsByTagName("DIV")[4].style.flex="none";
document.getElementById("Sample").innerHTML="The flex value for first and fourth div is changed to none";
}
</script>
</head>
<body>
<div id="demo">
<div id="orange"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
</div>
<p>Change the above divs flex property by clicking the below button</p>
<button onclick="changeFlex()">Change Flex</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิก “เปลี่ยน Flex ” −
