與同等高度和包裝的兒童div

Question

我有一個父div與七個或更多的孩子divs內。我需要在...之間顯示4個子div，其餘的將在隨後的四個div各行中進行換行。我需要所有的子div都具有相同的高度，相對於共享同一行的其他三個子div。父div也具有響應性，所以當視口較小時，它最終可能會顯示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% */ 
}