HTML DOM Style justifyContent प्रॉपर्टी

परिचय

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 = "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):