HTML DOM শৈলী ন্যায্যতা বিষয়বস্তু সম্পত্তি

HTML DOM justifyContent প্রপার্টি ফ্লেক্স আইটেমগুলিকে প্রধান অক্ষে অনুভূমিকভাবে সারিবদ্ধ করার জন্য ব্যবহার করা হয় যখন এটি সমস্ত উপলব্ধ স্থান নেয় না৷

−

-এর সিনট্যাক্স নিচে দেওয়া হল

জাস্টিফাই কনটেন্ট প্রপার্টি −

সেট করা হচ্ছে

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

উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -

মান	বর্ণনা
ফ্লেক্স-স্টার্ট	এটি কন্টেইনারের শুরুতে আইটেমগুলির অবস্থান করে এবং এটি ডিফল্ট মান৷
ফ্লেক্স-এন্ড	এটি কন্টেইনার শেষে আইটেমগুলিকে অবস্থান করে৷
কেন্দ্র	এটি আইটেমগুলিকে ধারক কেন্দ্রে অবস্থান করে৷
এর মধ্যে স্থান	এটি লাইনের মধ্যে ফাঁক দিয়ে আইটেমগুলিকে অবস্থান করে৷
স্পেস-আশেপাশে	এটি লাইনের আগে এবং পরে স্পেস সহ আইটেমগুলিকে অবস্থান করে৷
প্রাথমিক৷	এই প্রপার্টিটিকে প্রারম্ভিক মানের জন্য ফরসেট করা হচ্ছে।
উত্তরাধিকার৷	অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে পাওয়া

জাস্টিফাই কন্টেন্ট প্রপার্টি -

-এর জন্য একটি উদাহরণ দেখি

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      margin: auto;
      width: 400px;
      height: 120px;
      box-shadow: 0 0 0 5px brown;
      display: flex;
      flex-wrap: wrap;
   }
   #demo div {
      padding: 0;
      width: 50px;
      height: 50px;
      border: 5px solid;
      border-radius: 15%;
   }
   #demo div:nth-child(even) {
      border-color: black;
   }
   #demo div:nth-child(odd) {
      border-color: red;
   }
</style>
<script>
   function changeJustifyContent() {
      document.getElementById("demo").style.justifyContent="space-between";
      document.getElementById("Sample").innerHTML="The justify-content property is now set to space    between";
   }
</script>
</head>
<body>
   <div id="demo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
   <p>Change the above container justify-content property by clicking the below button</p>
   <button onclick="changeJustifyContent()">Change Justify Content</button>
   <p id="Sample"></p>
</body>

আউটপুট

HTML DOM শৈলী ন্যায্যতা বিষয়বস্তু সম্পত্তি

“Change Justify Content এ ক্লিক করলে ” বোতাম -

HTML DOM শৈলী ন্যায্যতা বিষয়বস্তু সম্পত্তি