Html flex容器中的等高行

如您所见，第一行

中的
列表项
具有相同的
高度
。但是第二行的项目具有不同的高度。我希望所有物品都有统一的
高度

是否有任何方法可以在不提供固定高度的情况下实现这一点，并且只使用flexbox


这是我的
code


.list{
显示器：flex；
柔性包装：包装；
最大宽度：500px；
}
.清单项目{
背景色：#ccc；
显示器：flex；
填充：0.5em；
宽度：25%；
保证金权利：1%；
边缘底部：20px；
}
.列出内容{
宽度：100%；
}


方框1
Lorem ipsum dolor sit amet，奉献精英



方框2
Lorem ipsum dolor sit amet，奉献精英



方框2
同侧阴唇



方框2
同侧阴唇



h1

对于相同高度，您应该更改css“显示”属性。有关更多详细信息，请参见给定的示例


.list{
显示：表格；
柔性包装：包装；
最大宽度：500px；
}
.清单项目{
背景色：#ccc；
显示：表格单元格；
填充：0.5em；
宽度：25%；
保证金权利：1%；
边缘底部：20px；
}
.列出内容{
宽度：100%；
}


方框1
Lorem ipsum dolor sit amet，奉献精英



方框2
Lorem ipsum dolor sit amet，奉献精英



方框2
同侧阴唇



方框2
同侧阴唇



h1
在您的案例中，高度将自动计算，因此您必须提供高度

用这个

.list-content{
  width: 100%;
  height:150px;
}

您可以通过固定“p”标记的高度或固定“列表项”的高度来实现

我已经确定了“p”的高度

溢出应该隐藏起来


.list{
显示器：flex；
柔性包装：包装；
最大宽度：500px；
}
.清单项目{
背景色：#ccc；
显示器：flex；
填充：0.5em；
宽度：25%；
保证金权利：1%；
边缘底部：20px；
}
.列出内容{
宽度：100%；
}
p{高度：100px；溢出：隐藏；}


方框1
Lorem ipsum dolor sit amet，奉献精英



方框2
Lorem ipsum dolor sit amet，奉献精英



方框2
同侧阴唇



方框2
同侧阴唇



h1

不，如果不设置固定高度（或使用脚本），就无法实现这一点


以下是我的两个答案，展示了如何使用脚本实现类似的功能：




答案是否定的

flexbox规范中提供了原因：


在多行flex容器中，每行的交叉尺寸是包含行上flex项目所需的最小尺寸

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

但是，在CSS网格布局中可以使用等高行：




另外，考虑一个JavaScript选项。
< P>如果你知道你正在映射的项，<强>你可以一次做一行（<强）>来完成这个任务。我知道这是一个解决办法，但它是有效的

对我来说，我每行有4个项目，所以我把它分成两行，每行4个，每行高度为50%

，去掉

flex-grow

，在

和

中使用

flex-column

。这样就行了

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

---

这似乎适用于固定父级高度的情况（在Chrome和Firefox中测试）：

---

如果由于某种原因无法使用网格，也许这就是解决方案。

您现在可以通过

显示：网格

：

.list{
显示：网格；
溢出：隐藏；
网格模板列：重复（3，1fr）；
网格自动行：1fr；
栅柱间隙：5px；
网格行间距：5px；
最大宽度：500px；
}
.清单项目{
背景色：#ccc；
显示器：flex；
填充：0.5em；
边缘底部：20px；
}
.列出内容{
宽度：100%；
}

方框1
Lorem ipsum dolor sit amet，奉献精英



方框2
Lorem ipsum dolor sit amet，奉献精英



方框2
同侧阴唇



方框2
同侧阴唇



h1

您可以使用flexbox：

ul.list{
填充：0；
列表样式：无；
显示器：flex；
对齐项目：拉伸；
证明项目：中心；
柔性包装：包装；
证明内容：中心；
}
李{
宽度：100px；
填充：.5rem；
边界半径：1em；
背景：黄色；
利润率：0.5px；
}

标题1
标题2
新行
标题3新的
行

谢谢，但我想以多个r显示列表

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}