html - 具有相同高度和换行的子 div

Question

我有一个父 div，其中包含七个或更多子 div。我需要显示 4 个子 div...其余的将包含在后续行中，每行包含 4 个 div。我需要子 div 相对于共享同一行的其他三个子 div 具有相同的高度。父 div 也是响应式的，因此当视口(viewport)较小时，它最终可能会显示 2 个子 div 的行。

display:inline-block 无法解决此问题(子 div 高度不相等)，并且 display:table-cell 不允许子 div 换行到后续行中。我怎样才能实现我的目标？

这是一个非常基本的jfiddle:https://jsfiddle.net/hockey2112/3r2pL25v/

<div class="table">
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This div has a little more information in it, and therefore it will be taller than the other divs.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>


.table {font-size: 9px;}

.tablecell {display: inline-block;
width: 23%; border: 1px solid #ff0000; vertical-align: top;}

Answer 1

扩展我对 flexbox 的使用的评论:

使用 Flexbox，沿横轴对齐元素的高度是自动完成的，因为 justify-content 的默认值为 stretch。

您所要做的就是在容器元素上设置display: flex;。您可能还需要添加 flex-wrap:wrap; 以便子元素换行为多行。

此外，默认的 flex-direction 是 row，因此您不需要指定它。

综上所述，需要使用以下CSS样式:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 23%; /* grow = 1, shrink = 0, basis = 23% */
}