弹性容器中的等高行

Question

如您所见，第一个 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>

原文由 Jinu Kurian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

答案是不。

flexbox 规范中提供了原因：

6. 弹性线

在多行弹性容器中，每行的横向尺寸是包含该行弹性项目所需的最小尺寸。

换句话说，当基于行的弹性容器中有多行时，每行的高度（“交叉尺寸”）是包含该行的弹性项目所需的最小高度。

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

• CSS 网格布局中的等高行

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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您现在可以 使用 display: grid 来完成：

 .list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  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，但它的行为 非常类似于 flexbox 容器， 网格内的项目可以是 flex 。

如果您需要响应式网格，网格布局也非常方便。也就是说，如果您希望网格每行的列数不同，您只需更改 grid-template-columns ：

 grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

等等…

您可以将它与媒体查询混合使用，并根据页面大小进行更改。

可悲的是，浏览器中仍然不支持 容器查询/元素查询（开箱即用），以使其在根据容器大小而不是页面大小更改列数时很好地工作（这很好用与可重用的网络组件）。

有关网格布局的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

跨浏览器支持网格布局：

https://caniuse.com/#feat=css-grid

原文由 Lucas Basquerotto 发布，翻译遵循 CC BY-SA 4.0 许可协议