Question

我成功地使用Flex布局来连续排列多个项目（带有动态文本）。 curl规则非常适合在有很多项目的情况下包装行。

（默认）flex-wrap: wrap;规则可确保所有物品的高度相等，这是我喜欢的。 las，看来“等高”逻辑仅适用于每一行。这是一个演示此示例：

align-items: stretch;

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid gray;
  padding-top: 0.5em;
  padding-left: 0.5em;
}

.label {
  border: 1px solid gray;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

将浏览器缩小到足够窄的位置会导致该行项目发生换行。此时，第一行中的项目比第二行中的项目高（由于某些项目具有多行文本）。例如。上面带有文本 Recursion 的框的高度最可能小于带有文本 Windows 的框的高度。

这种高度上的差异是我要避免的（不放弃包装）：有没有办法使<div class="container"> <div class="label">Windows</div> <div class="label">HTML</div> <div class="label">Functional<br>Programming</div> <div class="label">Hewlett<br>Packard</div> <div class="label">OS/2 Warp</div> <div class="label">Borland Pascal</div> <div class="label">Motorola</div> <div class="label">Assembler</div> <div class="label">Binary</div> <div class="label">Logic</div> <div class="label">Example</div> <div class="label">Compiler</div> <div class="label">Recursion</div> </div>这样的东西与行是否被包裹无关，以便所有物品总是有相同的高度？

Answer 1

我用了一些JavaScript。

let highest = 0;

let labels = document.querySelectorAll(".label");
labels.forEach(function(p){
if(p.offsetHeight > highest)
  highest = p.offsetHeight;
});

labels.forEach(function(p){
  p.style.height = highest + "px";
});

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid gray;
  padding-top: 0.5em;
  padding-left: 0.5em;
}

.label {
  border: 1px solid gray;
  margin-bottom: 0.5em;
  margin-right: 0.5em;

}

<div class="container">
  <div class="label">Windows</div>
  <div class="label">HTML</div>
  <div class="label">Functional<br>Programming</div>
  <div class="label">Hewlett<br>Packard</div>
  <div class="label">OS/2 Warp</div>
  <div class="label">Borland Pascal</div>
  <div class="label">Motorola</div>
  <div class="label">Assembler</div>
  <div class="label">Binary</div>
  <div class="label">Logic</div>
  <div class="label">Example</div>
  <div class="label">Compiler</div>
  <div class="label">Recursion</div>
</div>

Answer 2

也许可以。

.container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid gray;
    padding-top: 0.5em;
    padding-left: 0.5em;
}

.label {
    border: 1px solid gray;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    height:100px;
}

即使自动换行，如何为拉伸的Flex物品保持一致的物品高度？

2 个答案: