删除flexbox布局中的行之间的大差距

Question

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

我使用flexbox构建布局，当侧边栏比预览长时，它们之间存在巨大差距。

我希望每一行之间没有差距，因为如果侧边栏不错又短。

我扔在一起codepen。

//page wrapper for sidebar 
.flexPageWrapper { 
    display:flex; 
    /* Centering the page */ 
    max-width:1500px; 
    margin:0 auto; 
} 
//search results flexbox container 
.searchContentWrap { 
    flex-grow: 1; 
    display: flex; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    margin-right: 1em; 
    flex-direction: row; 
} 

Answer 1

柔性容器的初始设置是align-content: stretch。

这意味着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 */ 
} 

Revised Codepen