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

alignContent প্রপার্টি ব্যবহার করে ফ্লেক্সবক্স বা গ্রিডে আইটেমগুলো অ্যালাইন করা হয়। এটি ভেক্টিকাল অক্ষে আইটেমগুলো অ্যালাইন করতে ব্যবহৃত হয় যখন তারা উপলব্ধ সব স্পেস ব্যবহার করে না।

সিনট্যাক্স

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

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

মানসমূহ

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

উদাহরণ

alignContent প্রপার্টির উদাহরণ:

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

আউটপুট

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

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

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

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