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

HTML DOM Style alignItems প্রপার্টি ব্যবহার করে একটি ফ্লেক্স কন্টেইনারের ভিতরে থাকা আইটেমগুলোর ডিফল্ট অ্যালাইনমেন্ট নির্দিষ্ট করা হয়।

সিনট্যাক্স

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

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

মানসমূহ

মান	বিবরণ
Stretch	ডিফল্ট মান, আইটেমগুলোকে কন্টেইনারের সাথে ফিট করার জন্য ফেলাতে ব্যবহৃত হয়।
Center	আইটেমগুলোকে কন্টেইনারের কেন্দ্রে পজিশন করতে ব্যবহৃত হয়।
flex-start	আইটেমগুলোকে কন্টেইনারের শুরুতে পজিশন করতে ব্যবহৃত হয়।
flex-end	আইটেমগুলোকে কন্টেইনারের শেষে পজিশন করতে ব্যবহৃত হয়।
baseline	আইটেমগুলোকে কন্টেইনারের বেসলাইনে পজিশন করতে ব্যবহৃত হয়।
initial	প্রপার্টিটিকে প্রাথমিক মান হিসেবে সেট করে।
Inherit	প্যারেন্ট এলিমেন্ট থেকে প্রপার্টির মান উত্তরাধিকার হিসেবে গ্রহণ করে।

উদাহরণ

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

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

আউটপুট

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

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

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

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