使flexbox包装的物品吸收垂直空间

Question

我正在尝试实施一个＆＃34;拼贴画＆＃34;使用flexbox进行布局，其中不确定高度但固定宽度的元素可以是＆＃34;左浮动＆＃34;在一个类似拼贴画的拼贴画（有点像pintrest），但我很难让flex-items吸收额外的VERTICAL空间。

HMTL

<div class="widget-wrap">
    <div class="widget"> <!-- these elements are generated dynamically -->
        <!-- ~ indeterminate amount of content resulting of varying height ~ -->
    </div>
</div>

CSS

.widget-wrap { 
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.widget {
    width: 33.33333%;
    margin-bottom: 0; /* my best guess */
}

RESULT

正如你所看到的，当一个小部件比同一行中的其他小部件大时，会出现垂直间隙（我猜这是预期使用align-items: flex-start），但我希望后续行中的所有项目都与项目齐平在pintrest上的列中位于它们之上。