如何使用 JavaScript 设置弹性项目是否应该换行？

在本教程中，让我们了解一下如何使用 JavaScript 设置弹性项目是否应该换行。

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

让我们简要了解一下。

使用 Style 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 顺序在多行中换行元素，因为 'wrap' 是 flex-wrap 值。第二个容器在一行中显示项目，因为 "nowrap" 是 flex-wrap 值。

<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 值设置为这些项目。

项目以相反的顺序换行，因为 'wrap-reverse' 是 flex-wrap 值。'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 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告