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

คุณสมบัติ alignSelf ใน HTML DOM ใช้สำหรับระบุการจัดตำแหน่งของรายการ (item) ที่อยู่ภายในคอนเทนเนอร์แบบยืดหยุ่น (flex container) คุณสมบัตินี้ใช้เพื่อเขียนทับค่า align-items ที่กำหนดไว้ในเลย์เอาต์แบบ grid หรือ flex display ขององค์ประกอบ

ไวยากรณ์ (Syntax)

object.style.alignSelf = "auto|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:baseline; 
    flex-flow: row wrap; 
  } 
  .ele { 
    width: 60px; 
    height: 60px; 
    background-color: skyblue; 
  } 
  .ele:nth-child(2n) { 
    background-color: orange; 
  } 
</style> 
<script> 
  function changeAlign(){ 
    document.getElementsByClassName("ele")[1].style.alignSelf="flex-end"; 
  } 
</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 Self property of the above div by clicking the below button</p> 
<button onclick="changeAlign()">CHANGE</button> 
</body> </html>

ผลลัพธ์ (Output)

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

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