JavaScript से फ्लेक्स कंटेनर में आइटम्स का अलाइनमेंट कैसे सेट करें जब आइटम्स सभी उपलब्ध स्थान नहीं घेरते?

उदाहरण

alignContent प्रॉपर्टी से फ्लेक्स लाइन्स के बीच स्पेस वितरण नियंत्रित करें (जब flex-wrap: wrap हो)।

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        border: 1px solid #000000;
        width: 240px;
        height: 150px;
        flex-flow: row wrap;
        align-content: space-around;
        display: flex;
      }
      #box div {
        height: 80px;
        width: 80px;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div style="background-color:orange;" id="myID1">DIV1</div>
      <div style="background-color:blue;" id="myID2">DIV2</div>
      <div style="background-color:yellow;" id="myID3">DIV3</div>
    </div>
    <button onclick="display()"> सेट करें </button>
    <script>
      function display() {
        document.getElementById("box").style.alignContent = "space-between";
      }
    </script>
  </body>
</html>

मान: stretch (डिफ़ॉल्ट), center, flex-start, flex-end, space-between, space-around, space-evenly।

नोट: केवल मल्टी-लाइन फ्लेक्स कंटेनर (flex-wrap: wrap) पर प्रभावी।