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

คุณสมบัติ alignItems ใน HTML DOM Style ใช้สำหรับระบุการจัดตำแหน่งเริ่มต้นของรายการ (items) ที่อยู่ภายในคอนเทนเนอร์แบบยืดหยุ่น (flexible container)

ไวยากรณ์ (Syntax)

object.style.alignContent = " stretch|center|flex-start|flex-end|baseline|initial|inherit"

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

ตัวอย่าง (Example)

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

ผลลัพธ์ (Output)

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

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