How to set the direction of the flexible items with JavaScript?

JavascriptObject Oriented ProgrammingFront End Technology

Use the flex-direction property to set the direction of the flexible items in JavaScript.

Example

You can try to run the following code to learn how to implement flexDirection property to set the direction of the flexible items −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 1px solid #000000;
            width: 450px;
            height: 150px;
            display: flex;
            flex-direction: column;
         }
         #box div {
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 20px;
         }
      </style>
   </head>
   <body>
      <div id = "box">
         <div style = "background-color:orange;">DIV1</div>
         <div style = "background-color:blue;">DIV2</div>
         <div style = "background-color:yellow;" id="myID">DIV3</div>
      </div>
      <p>Using flexDirection property</p>
      <button onclick = "display()">Set</button>
      <script>
         function display() {
            document.getElementById("box").style.flexDirection = "row-reverse";
         }
      </script>
   </body>
</html>
raja
Published on 27-Feb-2018 16:41:28
Advertisements