如您所见，list-items在第一个row有相同的height。但第二个项目row有不同的heights。我希望所有物品都有统一的height.
有什么方法可以在不付出的情况下实现这一目标固定高度并且只使用flexbox?
这是我的code
.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规范中给出了原因：
6. 柔性线 https://www.w3.org/TR/css3-flexbox/#flex-lines
在多行 Flex 容器中，每行的交叉大小是包含该行上的 Flex 项目所需的最小大小。
换句话说，当基于行的 Flex 容器中有多行时，每行的高度（“交叉大小”）是包含该行上的 Flex 项目所需的最小高度。
然而，等高行在 CSS 网格布局中是可能的：
- CSS 网格布局中的等高行 https://stackoverflow.com/q/44488357/3597276
否则，请考虑 JavaScript 替代方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
