使用 JavaScript 设置弹性项目是否换行？

在本教程中，我们将了解如何使用 JavaScript 设置弹性项目的换行方式。

我们可以使用 JavaScript 中的 `flex-wrap` 属性来设置项目的换行值。

让我们简要了解一下。

使用 `flex-wrap` 属性

`flex-wrap` 属性定义了是否在容器元素内换行项目。要使 `flex-wrap` 属性生效，项目必须是弹性的。默认值为 `nowrap`。

用户可以按照以下语法使用 `flex-wrap` 属性。

语法

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

以上语法将 `flex-wrap` 值设置为项目的样式。

值

  • nowrap − 指定项目不换行。因此，项目显示在单行中。

  • wrap − 指定如果项目溢出则换行。因此，项目显示在多行中。

  • wrap-reverse − 指定如果项目溢出则按反序换行。因此，项目以反序显示在多行中。

  • initial − 将此属性设置为其默认值。

  • inherit − 从父元素继承此属性。

返回值

返回值是一个字符串，表示 `flex-wrap` 属性。

示例 1

在这个程序中，我们有两个弹性容器元素。五个项目是每个容器的子元素。当用户点击按钮时，我们调用函数使用上面给出的 `flex-wrap` 属性语法将 `flex-wrap` 值设置为所有项目。第一个容器根据 DOM 顺序在多行中换行元素，因为 `flex-wrap` 值为“wrap”。第二个容器显示单行项目，因为 `flex-wrap` 值为“nowrap”。

<html>
<head>
   <style>
      #flxWrpCont1,
      #flxWrpCont2 {
         width: 90px;
         height: 90px;
         border: 1px solid black;
         display: flex;
      }
      #flxWrpEl {
         width: 30px;
         height: 30px;
      }
      #flxWrpCont1 div:nth-child(odd) {
         background-color: skyblue;
      }
      #flxWrpCont2 div:nth-child(odd) {
         background-color: grey;
      }
   </style>
</head>
<body>
   <h2> Setting the item wrap value to the elements using the <i> flexWrap property </i>
   </h2>
   <br>
   <br>
   <b> Wrap </b>
   <br>
   <br>
   <div id="flxWrpCont1">
      <div id="flxWrpEl"> 1 </div>
      <div id="flxWrpEl"> 2 </div>
      <div id="flxWrpEl"> 3 </div>
      <div id="flxWrpEl"> 4 </div>
      <div id="flxWrpEl"> 5 </div>
   </div>
   <br>
   <br>
   <b> No Wrap </b>
   <br>
   <br>
   <div id="flxWrpCont2">
      <div id="flxWrpEl"> 1 </div>
      <div id="flxWrpEl"> 2 </div>
      <div id="flxWrpEl"> 3 </div>
      <div id="flxWrpEl"> 4 </div>
      <div id="flxWrpEl"> 5 </div>
   </div>
   <br>
   <br>
   <div id="flxWrpWrap">
      <button onclick="setflexWrap()"> Set </button>
   </div>
   <script>
      function setflexWrap() {
         var flxWrpWrap = document.getElementById("flxWrpWrap");
         flxWrpWrap.style.display = "none";
         var flxWrpCont1 = document.getElementById("flxWrpCont1");
         var flxWrpCont2 = document.getElementById("flxWrpCont2");
         flxWrpCont1.style.flexWrap = "wrap";
         flxWrpCont2.style.flexWrap = "nowrap";
      }
   </script>
</body>
</html>

示例 2

在这个程序中，我们在容器内有七个项目。当用户点击按钮时，我们调用函数将 `flex-wrap` 值设置为这些项目。

项目按反序换行，因为 `flex-wrap` 值为“wrap-reverse”。“VIB”-“GYO”-“R”顺序在反向行顺序中更改为“R”-“GYO”-“VIB”。

<html>
<head>
   <style>
      #flxWrpRevCont {
         width: 300px;
         height: 300px;
         border: 1px solid black;
         display: flex;
      }
      #flxWrpRevEl {
         width: 100px;
         height: 100px;
         color: #ffff;
      }
      #flxWrpRevEl:nth-child(1) {
         background-color: violet;
      }
      #flxWrpRevEl:nth-child(2) {
         background-color: indigo;
      }
      #flxWrpRevEl:nth-child(3) {
         background-color: blue;
      }
      #flxWrpRevEl:nth-child(4) {
         background-color: green;
      }
      #flxWrpRevEl:nth-child(5) {
         background-color: yellow;
         color: #000000;
      }
      #flxWrpRevEl:nth-child(6) {
         background-color: orange;
      }
      #flxWrpRevEl:nth-child(7) {
         background-color: red;
      }
   </style>
</head>
<body>
   <h2> Setting the item to wrap reverse value to the elements using the <i> flexWrap property </i>
   </h2>
   <br>
   <br>
   <div id="flxWrpRevCont">
      <div id="flxWrpRevEl"> V </div>
      <div id="flxWrpRevEl"> I </div>
      <div id="flxWrpRevEl"> B </div>
      <div id="flxWrpRevEl"> G </div>
      <div id="flxWrpRevEl"> Y </div>
      <div id="flxWrpRevEl"> O </div>
      <div id="flxWrpRevEl"> R </div>
   </div>
   <br>
   <br>
   <div id="flxWrpRevWrap">
      <button onclick="setflexRevWrap()"> Reverse </button>
   </div>
   <script>
      function setflexRevWrap() {
         var flxWrpRevWrap = document.getElementById("flxWrpRevWrap");
         
         //flxWrpRevWrap.style.display = "none";
         var flxWrpRevCont = document.getElementById("flxWrpRevCont");
         flxWrpRevCont.style.flexWrap = "wrap-reverse";
      }
   </script>
</body>
</html>

本教程讲解了如何使用 `flex-wrap` 属性设置项目的换行值。这在多列布局中非常有用，可以按顺序或反序换行元素。

更新于：2022年11月15日

113 次浏览

启动您的职业生涯

完成课程后获得认证

开始学习
广告