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

คุณสมบัติ alignContent ใช้สำหรับจัดตำแหน่งรายการใน flexbox หรือ grid ใช้จัดตำแหน่งรายการบนแกนแนวตั้งเมื่อไม่ได้ใช้พื้นที่ทั้งหมดที่มีอยู่

ไวยากรณ์ (Syntax)

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

ค่าที่ใช้ได้ (Values)

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <head> <style> 
  #container { 
    width: 180px; 
    height: 220px; 
    padding: 10px; 
    border: 1px solid #333; 
    display: flex; 
    flex-flow: row wrap; 
    align-content: space-around; 
  } 
  .ele { 
    width: 60px; 
    height: 60px; 
    background-color: skyblue; 
  } 
  .ele:nth-child(2n) { 
    background-color: orange; 
  } 
</style> 
<script> 
  function changeAlign(){ 
    document.getElementById("container").style.alignContent="flex-start"; 
  } 
</script> </head> 
<body> 
<div id="container"> 
<div class="ele"></div> 
<div class="ele"></div> 
<div class="ele"></div> 
<div class="ele"></div> 
<div class="ele"></div> 
<div class="ele"></div> 
</div> 
<p>Change the align content property of the above div by clicking the belwo button</p> 
<button onclick="changeAlign()">CHANGE</button> 
</body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

เมื่อคลิกปุ่ม CHANGE: