即使在自动换行时，如何为拉伸的 Flex 项目保持统一的项目高度?

Question

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

(默认)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;
}

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

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

这种高度差异是我想避免的(不放弃包装)：有没有办法让类似align-items: stretch;的东西独立于项目行是否被包装，以便所有项目始终具有相同的高度？

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;
}