消除 flexbox 布局中行之间的大间隙 [重复]答案

【问题标题】：Removing large gap between rows in flexbox layout [duplicate]消除 flexbox 布局中行之间的大间隙 [重复]
【发布时间】：2016-10-31 06:57:46
【问题描述】：

我的侧边栏比内容长（发布带有缩略图的预览）。

我正在使用 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;
}

【问题讨论】：

标签： html wordpress css flexbox

【解决方案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

【讨论】：