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

คุณสมบัติ HTML DOM justifyContent ใช้สำหรับจัดตำแหน่ง flex items แนวนอนบนแกนหลัก (main axis) เมื่อไม่ได้ใช้พื้นที่ทั้งหมดที่มีอยู่

ไวยากรณ์ (Syntax)

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

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

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

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

<!DOCTYPE html> <html> <head> <style> 
    #demo { 
        margin: auto; 
        width: 400px; 
        height: 120px; 
        box-shadow: 0 0 0 5px brown; 
        display: flex; 
        flex-wrap: wrap; 
    } 
    #demo div { 
        padding: 0; 
        width: 50px; 
        height: 50px; 
        border: 5px solid; 
        border-radius: 15%; 
    } 
    #demo div:nth-child(even) { 
        border-color: black; 
    } 
    #demo div:nth-child(odd) { 
        border-color: red; 
    } 
</style> <script> 
    function changeJustifyContent() { 
        document.getElementById("demo").style.justifyContent = "space-between"; 
        document.getElementById("Sample").innerHTML = "คุณสมบัติ justify-content ตั้งเป็น space-between แล้ว"; 
    } 
</script> </head> <body> 
    <div id="demo"> 
        <div></div> 
        <div></div> 
        <div></div> 
        <div></div> 
        <div></div> 
    </div> 
    <p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนคุณสมบัติ justify-content ของ container ด้านบน</p> 
    <button onclick="changeJustifyContent()">เปลี่ยน Justify Content</button> 
    <p id="Sample"></p> 
</body> </html>

ผลลัพธ์

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