HTML DOM Style alignSelf প্রপার্টি

HTML DOM alignSelf প্রপার্টি ব্যবহার করে একটি ফ্লেক্স কন্টেইনারের ভিতরে থাকা নির্দিষ্ট একটি আইটেমের অ্যালাইনমেন্ট নির্দিষ্ট করা হয়। alignSelf প্রপার্টি একটি এলিমেন্টের grid বা flex ডিসপ্লে লেআউটে নির্দিষ্ট align-items মানকে ওভাররাইড করতে ব্যবহৃত হয়।

সিনট্যাক্স

alignSelf প্রপার্টি সেট করার সিনট্যাক্স:

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

মানসমূহ

উদাহরণ

Style alignSelf প্রপার্টির উদাহরণ:

<!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>

আউটপুট

নিচের আউটপুট তৈরি হবে:

CHANGE বাটনে ক্লিক করলে: