html - flex 容器中的等高行

Question

如您所见，第一行中的list-items具有相同的高度。但是第二个行 中的项具有不同的高度。我希望所有元素都具有统一的高度。

有没有办法在不提供固定高度并且只使用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>

Answer 1

答案是否定的。

flexbox规范中给出了原因:

6. Flex Lines

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 容器中有多行时，每行的高度(“交叉尺寸”)是包含该行的 flex 元素所需的最小高度。

然而，等高行在 CSS 网格布局中是可能的:

• Equal height rows in CSS Grid Layout

否则，请考虑使用 JavaScript 替代方案。