如您所见，第一行中的列表项具有相同的高度。但是第二行中的项目具有不同的高度。我希望所有物品的高度均匀。
有没有办法实现这一点，而不给出固定高度，只使用flexBox？
这是我的代码
.list {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}
<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>Box 1</h2>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>Box 2</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>Box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>Box 2</h3>
<p>Lorem ipsum dolor</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h1>h1</h1>
</div>
</li>
</ul>
解决方法
答案是不。
原因在flexBox规范中提供：
07000
In a multi-line flex container,the cross size of each line is the minimum size necessary to contain the flex items on the line.
换句话说，当基于行的Flex容器中有多行时，每行的高度(“交叉大小”)是在行上包含弹性项所需的最小高度。
但是，CSS Grid Layout中可以使用相等高度的行：
> Equal height rows in CSS Grid Layout
否则，请考虑JavaScript替代方案。
