คุณสมบัติ HTML DOM Style flexBasis

คุณสมบัติ HTML DOM Style flexBasis ใช้สำหรับระบุขนาดเริ่มต้นขององค์ประกอบที่มีการแสดงผลแบบ flex คุณสมบัติ flexBasis มีความสำคัญสูงกว่า width สำหรับค่าอื่นๆ นอกจาก auto

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ flexBasis:

object.style.flexBasis = "number|auto|initial|inherit"

ค่าของคุณสมบัติ (Property Values)

ตัวอย่างการใช้งาน

<!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 = "ค่า flex basis เพิ่มขึ้นเป็น 200px"; 
    } 
</script> </head> <body> 
    <h2>หัวข้อตัวอย่าง</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>คลิกปุ่มด้านล่างเพื่อเปลี่ยนคุณสมบัติ flex basis ของรูปภาพภายใน div</p> 
    <button onclick="changeFlexBasis()">เปลี่ยน Flex Basis</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

เมื่อคลิกปุ่ม "เปลี่ยน Flex Basis":