在Flex容器中等高行

Question

在Flex容器中等高行

如您所见，list-items在第一个row有同样的height..但是第二个项目row有不同heights..我要所有的物品都有制服height.

有没有办法做到这一点而不付出定高而且只使用挠曲箱?

enter image description here

这是我的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>

Answer 1

答案是否定的。在柔性箱规范中提供了原因：6.柔性线在多行FLEX容器中，每一行的交叉大小是包含在该行上的FLEX项所必需的最小尺寸。换句话说，当一个基于行的Flex容器中有多行时，每一行的高度(“交叉大小”)是包含在该行上的FLEX项所必需的最小高度。然而，在CSS Grid布局中，等高行是可能的：CSS网格布局中的等高行否则，考虑使用JavaScript替代方案。

Answer 2

如果你知道你正在映射的项目，您可以通过一次执行一行来完成这一任务。..我知道这是个解决办法，但有效。对我来说，我每一行有4个项目，所以我把它分成两行，每一行4项。height: 50%，摆脱flex-grow，有<RowOne />和<RowTwo />在.<div>带着flex-column..这会起作用的<div&nbsp;class='flexbox&nbsp;flex-column&nbsp;height-100-percent'> &nbsp;&nbsp;&nbsp;<RowOne&nbsp;class='flex&nbsp;height-50-percent'&nbsp;/> &nbsp;&nbsp;&nbsp;<RowTwo&nbsp;class='flex&nbsp;height-50-percent'&nbsp;/></div>