HTML DOM 样式 flexDirection 属性

htmlweb developmentfront end technology更新于 2024/3/14 8:12:17

HTML DOM 样式 flexDirection 属性用于设置或返回 flex 元素的放置方向。

以下是语法 −

设置 flexDirection 属性 −

object.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

以上属性解释如下 −

值	描述
row	此项将弹性项目水平显示为一行，是默认值。
row-reverse	此项将弹性项目水平显示，但顺序与行相反。
column	将弹性项目垂直显示为一列。
column-reverse	这将垂直显示弹性项目，但顺序与列相反。
initial	将此属性设置为初始值。
inherit	继承父级属性值

让我们看一个关于 flexDirection 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      box-shadow: 0 0 0 3px #a323c3;
      display: flex;
      flex-direction: column-reverse;
   }
   #demo div {
      margin: auto;
      border: thin solid green;
   }
</style>
<script>
   function changeFlexDirection() {
      document.getElementById("demo").style.flexDirection="row-reverse";
      document.getElementById("Sample").innerHTML="The flex direction for the container div is    changed to row-reverse";
   }
</script>
</head>
<body>
   <div id="demo">
      <div>1  <img src="https://www.cainiaomax.com/images/3d.png"></div>
      <div>2  <img src="https://www.cainiaomax.com/images/blockchain.png"></div>
      <div>3  <img src="https://www.cainiaomax.com/images/css.png"></div>
      <div>4  <img src="https://www.cainiaomax.com/images/reactjs.png"></div>
   </div>
   <p>Change the above container div flex direction by clicking the below button</p>
   <button onclick="changeFlexDirection()">Change Flex Direction</button>
   <p id="Sample"></p>
</body>
</html>