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

คุณสมบัติ HTML DOM Style flexDirection ใช้สำหรับกำหนดหรือส่งคืนทิศทางการจัดวางขององค์ประกอบ flex (flex items) ภายใน flex container

ไวยากรณ์ (Syntax)

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

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

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

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

<!DOCTYPE html> <html> <head> <style> 
    #demo { 
        box-shadow: 0 0 0 3px #a323c3; 
        display: flex; 
        flex-direction: column-reverse; 
    } 
    #demo div { 
        margin: auto; 
        border: thin solid green; 
    } 
</style> <script> 
    function changeFlexDirection() { 
        document.getElementById("demo").style.flexDirection = "row-reverse"; 
        document.getElementById("Sample").innerHTML = "ทิศทาง flex ของ container div ถูกเปลี่ยนเป็น row-reverse"; 
    } 
</script> </head> <body> 
    <div id="demo"> 
        <div>1 <img src="https://www.tutorialspoint.com/images/3d.png"></div> 
        <div>2 <img src="https://www.tutorialspoint.com/images/blockchain.png"></div> 
        <div>3 <img src="https://www.tutorialspoint.com/images/css.png"></div> 
        <div>4 <img src="https://www.tutorialspoint.com/images/reactjs.png"></div> 
    </div> 
    <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนทิศทาง flex ของ container div ด้านบน</p> 
    <button onclick="changeFlexDirection()">เปลี่ยนทิศทาง Flex</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

เมื่อคลิกปุ่ม "เปลี่ยนทิศทาง Flex":