How to set the alignment between the items inside a flexible container when the items do not use all available space with JavaScript?

Javascript Object Oriented Programming Front End Technology

Use the alignContent property in JavaScript to set the alignment between the items inside a flexible container.

Example

You can try to run the following code to implement alignContent property in JavaScript −

<!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()"> Set </button>
      <script>
         function display() {
            document.getElementById("box").style.alignContent = "space-between";
         }
      </script>
   </body>
</html>

Krantik Chavan

Published on 27-Feb-2018 12:47:02

Previous Page Print Page