HTML DOM 样式 flexWrap 属性

htmlweb developmentfront end technology更新于 2024/3/14 10:52:17

HTML DOM 样式 flexWrap 属性用于指定 flex 元素内元素的包裹方式。

以下是语法 −

设置 flexWrap 属性 −

object.style.flexWrap = "nowrap|wrap|wrap-reverse|initial|inherit"

以上属性解释如下 −

值	描述
nowrap	这是默认值，指定灵活项目不会换行。
wrap	这指定灵活项目将在必要时换行。
wrap-reverse	如有必要，以相反的顺序换行灵活项目。
initial	将此属性设置为初始值。
inherit	继承父级属性值

让我们看一个 flexWrap 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      margin: auto;
      width: 180px;
      height: 120px;
      box-shadow: 0 0 0 5px brown;
      display: flex;
      flex-wrap: wrap;
   }
   #demo div {
      padding: 0;
      width: 50px;
      height: 50px;
      border: 5px solid;
      border-radius: 15%;
   }
   #demo div:nth-child(even) {
      border-color: black;
   }
   #demo div:nth-child(odd) {
      border-color: red;
   }
</style>
<script>
   function changeFlexWrap() {
      document.getElementById("demo").style.flexWrap="nowrap";
      document.getElementById("Sample").innerHTML="The flex wrap property for the container div is    set to no-wrap";
   }
</script>
</head>
<body>
   <div id="demo">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
   <p>Change the above container flex wrap property by clicking the below button</p>
   <button onclick="changeFlexWrap()">Change Flex Wrap</button>
   <p id="Sample"></p>
</body>
</html>