Html 消除flexbox布局中行之间的大间隙

我有一个边栏，比内容长（用缩略图发布预览）

我使用flexbox构建布局，当边栏比预览长时，边栏之间会有一个巨大的间隙

我希望每一行之间不要有一个间隙，如果边栏很好很短的话

我已经准备好了一份工作

---

flex容器的初始设置为

这意味着flex容器中的多行将扩展以覆盖容器的长度（在本例中为高度）

侧边栏增加了容器的高度，使缩略图内容分布在更高的空间上

您可以使用

align content:flex start

覆盖此默认行为

.searchContentWrap {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-right: 1em;
    flex-direction: row;
    align-content: flex-start; /* NEW */
}

.searchContentWrap {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-right: 1em;
    flex-direction: row;
    align-content: flex-start; /* NEW */
}