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

Posted 2023-03-05

【中文标题】消除 flexbox 布局中行之间的大间隙 [重复]

【英文标题】：Removing large gap between rows in flexbox layout [duplicate]

【发布时间】：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;

【参考方案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