在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 class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' /></div>