html - 即使在自动换行时，如何为拉伸(stretch)的 Flex 元素保持统一的元素高度？

Question

我成功地使用 Flex 布局将多个元素(带有动态文本)排列成一行。 flex-wrap: wrap; 规则非常适合在有很多元素的情况下换行。

(默认)align-items: stretch; 规则确保所有元素都具有相同的高度，这是我喜欢的。 las，这种“等高”逻辑似乎只适用于每一行。下面是一个演示这一点的例子:

.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>

使浏览器足够窄会导致元素行换行。此时，第一行中的元素比第二行中的元素更高(由于某些元素具有多行文本)。例如。上面带有文本 Recursion 的框的高度很可能比带有文本 Windows 的框的高度小。

这种高度差异是我想避免的(不放弃包装):有没有办法让 align-items: stretch; 独立于行是否items 被包裹起来，这样所有的 items 总是具有相同的高度？

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>