คุณสมบัติ flexBasis สไตล์ HTML DOM ใช้เพื่อระบุขนาดเริ่มต้นขององค์ประกอบด้วยการแสดงผลแบบยืดหยุ่น คุณสมบัติ flexBasis มีลำดับความสำคัญสูงกว่า width สำหรับค่าอื่นที่ไม่ใช่ auto สำหรับ flex-basis
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ flexBasis -
object.style.flexBasis = "number|auto|initial|inherit"
อธิบายคุณสมบัติข้างต้นดังนี้ −
| ค่า | คำอธิบาย |
|---|---|
| จำนวน | การระบุความยาวเริ่มต้นของรายการที่ยืดหยุ่นเป็นเปอร์เซ็นต์หรือหน่วยความยาวใดก็ได้ |
| อัตโนมัติ | กำหนดความยาวเท่ากับความยาวของรายการที่ยืดหยุ่นได้ หากไม่ระบุความยาว จะเป็นไปตามเนื้อหา นี่คือค่าเริ่มต้น |
| ค่าเริ่มต้น | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | รับค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างคุณสมบัติ flexBasis -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#demo, #demo2{
background-color: #fff8dc;
margin: 10px;
height: 100px;
box-shadow: 0 0 0 4px brown;
display: flex;
}
#demo div {
flex-basis: 110px;
}
</style>
<script>
function changeFlexBasis() {
for(var i=1;i<3;i++){
document.getElementsByTagName("DIV")[i].style.flexBasis="200px";
}
document.getElementById("Sample").innerHTML="The flex basis value is increased to 200px";
}
</script>
</head>
<body>
<h2>Demo Heading</h2>
<div id="demo">
<div><img src="https://www.tutorialspoint.com/images/home_tensor_flow.png"></div>
<div><img src="https://www.tutorialspoint.com/images/home_blockchain_python.png"></div>
<div><img src="https://www.tutorialspoint.com/images/multilanguage-tutorials.png"></div>
</div>
<p>Change the flex basis property for the image present inside divs by clicking the below button</p>
<button onclick="changeFlexBasis()">Change Flex Basis</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิก “เปลี่ยนพื้นฐานการยืดหยุ่น ปุ่ม −
