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

在flexbox布局中删除行之间的大间隙

1 个答案: