如何使用JavaScript设置灵活项目的方向?

使用flex-direction属性设置JavaScript中弹性项目的方向。

示例

您可以尝试运行以下代码,以了解如何实现flexDirection 属性以设置灵活项的方向-

<!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>

以上是 如何使用JavaScript设置灵活项目的方向? 的全部内容, 来源链接: utcz.com/z/331184.html

回到顶部