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

HTML DOM justifyContent প্রপার্টি ফ্লেক্স আইটেমগুলিকে মূল অক্ষ (main axis)-এ অনুভূমিকভাবে সজ্জিত করতে ব্যবহৃত হয় যখন সেগুলো উপলব্ধ সমস্ত স্থান ধরে না।

সিনট্যাক্স

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

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

প্রপার্টি মানগুলি

মান	বিবরণ
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 = "justify-content প্রপার্টি এখন space-between-এ সেট করা হয়েছে";
  }
</script>
</head>
<body>
  <div id="demo">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p>নিচের বাটনে ক্লিক করে উপরের কন্টেইনারের justify-content প্রপার্টি পরিবর্তন করুন</p>
  <button onclick="changeJustifyContent()">জাস্টিফাই কন্টেন্ট পরিবর্তন করুন</button>
  <p id="Sample"></p>
</body>
</html>

আউটপুট

প্রাথমিক অবস্থায় ফ্লেক্স আইটেমগুলো কন্টেইনারের শুরুতে (flex-start) সজ্জিত থাকবে।

"জাস্টিফাই কন্টেন্ট পরিবর্তন করুন" বাটনে ক্লিক করার পর আইটেমগুলো space-between অনুযায়ী সজ্জিত হবে।