动态 <HR /> 在 Flexbox 中？答案

【问题标题】：Dynamic <HR /> In Flexbox?动态 <HR /> 在 Flexbox 中？
【发布时间】：2020-10-26 09:10:53
【问题描述】：

我正在开发这个应用程序，它有一个简单的布局（我能够实现）。但是，我需要实现这 1 个奇怪的要求，我花了 2 天时间试图让它工作，唉，我需要一些帮助。

这是我当前拥有的 HTML：JSFiddle Link

HTML：

<body>
  <div class="row flex-container">
    <div class="col-sm-3" style="margin:5px">
      <label>Label 1</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 2</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 3</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 4</label>
    </div>
    <hr />
    <div class="col-sm-3" style="margin:5px">
      <label>Label 5</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 6</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 7</label>
    </div>
    <div class="col-sm-3" style="margin:5px">
      <label>Label 8</label>
    </div>
  </div>
</body>

CSS：

.flex-item {
  margin: 4px;
  flex: 0 1 calc(25% - 8px); 
}
    .flex-container {
  width: inherit;
  display: flex;
  flex-flow: row wrap;
  position: relative;
}
    .flex-container hr {
        width: 100%;
  padding: 0%;
  margin: 0%;
  margin-top: 20px;
  margin-bottom: 20px;
  height: 2px;
  border: none;
  background-color: #000;
}

现在，这是我想要的布局（如 JSFiddle 链接所示）。如您所见，有 2 行，并且有一个 HR 标签将它们分开。现在，如果我要从第 1 行中删除一个值，第 2 行的元素应该向上移动到第 1 行。

两行最多应包含 4 个元素。因此，如果我从第 1 行中删除 1 个元素，则只有 1 个元素应该向上移动到第 1 行，依此类推。

如果第 2 行中没有元素，则该 HR 甚至不应该显示。

我认为可以做的是，获取行中元素的数量，然后根据该数量在 HR 上输入“ngIf”。但是，这仍然不能解决我移动上述元素的第一个要求。

我确实坚持这个。我该如何继续这个？一些指导将不胜感激。我不需要确切的代码，也许需要思考如何实现这一点……这就是我需要帮助的地方。

【问题讨论】：

您也可以粘贴您的 ngfor 源代码吗？ ? （您只需要在索引为 ===4 的 for 循环的索引上添加一个逻辑，然后添加 hr
不幸的是，没有ngFor 循环。 html 是这样硬编码的，值就这样来和使用。如果我有一个循环，那就太棒了。

标签： javascript html css angular flexbox

【解决方案1】：

我会这样做：

const items = ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8'];

const firstRow = items.slice(0, 4);
const secondRow = items.slice(4);

document.body.innerHTML = `${firstRow.join(',')} <hr /> ${secondRow.join(',')}`;

【讨论】：

感谢分享这种方法。但是，我现在宁愿避免任何额外的阵列维护。检查@Abu 的答案。这完全保留在 CSS 和 HTML 属性中，并且可以很好地完成工作。但是，也感谢这种方法。

【解决方案2】：

我只是用 CSS 做的，分叉了你的 sn-p，基本上修改了你的 css，你已经接近答案了：

.flex-item {
  margin: 4px;
  flex: 0 1 calc(25% - 8px); 
}
    .flex-container {
  width: inherit;
  display: flex;
  flex-flow: row wrap;
  position: relative;
  justify-content: flex-start;
}
    .flex-container hr {
     top: 0;
     bottom: 0;
     width: 100%;
     margin: auto;
     height: 2px;
     border: none;
     background-color: #000;
     position: absolute;
}

.flex-container div {
  flex: 1 0 calc(25% - 10px);
  max-width: calc(25% - 10px);
}

https://jsfiddle.net/3k84p7to/

【讨论】：

感谢这个，它单独工作得很好。但是，在我的代码库中，它导致了一些元素无法正确移动的问题。 @Abu 的回答非常有效。

【解决方案3】：

这个问题你可以使用 flex Order 来解决。

步骤：

为所有不带“HR”的项目添加一个通用类
为所有使用“nth-of-type(2)”的项目编写 CSS 代码learn about nth-of-type()
parent 必须显示 flex 和 flex wrap。
为 HR 100% 宽度编写 css。

最好使用内联 CSS 来维护 CSS 的顺序。

#这里代码sn-p或者访问JSFiddle

.flex-item {
  margin: 4px;
  flex: 0 1 calc(25% - 8px); 
}
.flex-container {
  width: inherit;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.item:nth-of-type(1) { order: 1 ; }
.item:nth-of-type(2) { order: 2; }
.item:nth-of-type(3) { order: 3; }
.item:nth-of-type(4) { order: 4; }
.item:nth-of-type(5) { order: 5; }
.item:nth-of-type(6) { order: 6; }
.item:nth-of-type(7) { order: 7; }
.item:nth-of-type(8) { order: 8; }

.flex-container hr {
    order: 5;
    width: 100%;
    background-color: #000;
}

<div class="row flex-container">
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 2</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 3</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 4</label>
    </div>
    <hr />
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 5</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 6</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 7</label>
    </div>
    <div class="item col-sm-3" style="margin:5px">
      <label>Label 8</label>
    </div>
  </div>

==== 谢谢====

【讨论】：

这个工作非常出色，nth-oftype()` 是新的和值得阅读的东西。它确实为我节省了很多我本来可以用数组和所有东西完成的工作。但是，如果我删除第 1 行的所有元素，第 2 行就会移到上面。但是，人力资源标签仍然存在。我认为这是我需要研究的事情。但是，其他一切都像一个魅力。真是太感谢你了！
@Xonshiz，那么您需要一个简单的 javascript 代码，如果条件不完整，只需检查最小项目，然后删除/隐藏
。希望这可以解决您的问题。
是的，我做到了。再次非常感谢！ :D