圍繞更高元素包裹

Question

我有一個列表，其中包含一些元素。 如果任何項目具有相同的高，所有項目正確包裝。 但是，如果單個項目的高度比其他項目高，那麼這些項目會在高級元素的底部環繞。

在這裏你可以看到我的例子：https://jsfiddle.net/qqouoL6n/

這裏是我的簡單的HTML列表：

<div id="flexbox-container"> 
    <div class="small-container"></div> 
    <div class="big-container"></div> 
    <div class="small-container"></div> 
    <div class="small-container"></div> 
    <div class="small-container"></div> 
    <div class="small-container"></div> 
</div> 

正如你可以看到，有一個DIV，與代表更高的項目，則一類其他的。 這裏是CSS：

#flexbox-container { 
    width: 220px; 
    background-color: lightgrey; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    padding: 10px; 
} 

.big-container { 
    background-color: orange; 
    width: 100px; 
    height: 200px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 

.small-container { 
    background-color: orange; 
    width: 100px; 
    height: 110px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 

我使用Flexbox的浮這些項目。如果所有項目都具有相同的高度，則一切都按預期工作。但是，如果第二項具有其他元素的雙倍高，那麼這些項目會忽略差距。

我想實現，差距已經填滿了下一個項目，我該怎麼做？

Answer 1

您可以改爲使用flex-direction: column代替，但如果其中一個項目比其他項目更寬泛，您會得到同樣的問題。您還需要在#flexbox-container DIV上指定height屬性，以確保列確實包裝而不是繼續向下。

事情是這樣的：

#flexbox-container { 
    width: 220px; 
    height: 500px; 
    background-color: lightgrey; 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    padding: 10px; 
} 

這裏的updated JSFiddle。