在flexbox布局中删除行之间的大间隙 [英] Removing large gap between rows in flexbox layout

问题描述

我有一个长度大于内容的边栏（用缩略图预览）。

我使用flexbox来构建布局，当边栏长于预览，之间有一个巨大的差距。

我希望每一行之间没有间隙，如果侧边栏是好的和短。 p>

我已经将一个代码。 / p>

  // sidebar的页面封装器
 .flexPageWrapper {
 display：flex; 
 / *居中页面* / 
 max-width：1500px; 
 margin：0 auto; 
} 
 //搜索结果flexbox容器
 .searchContentWrap {
 flex-grow：1; 
 display：flex; 
 justify-content：flex-start; 
 flex-wrap：wrap; 
 margin-right：1em; 
 flex-direction：row; 
} 
  

解决方案

容器是 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 * / 
} 
  

修订的Codepen

I have a sidebar that is longer than the content (post previews with thumbnails).

I am using flexbox to build the layout and when the sidebar is longer than the previews, there is a huge gap in between.

I want each row to not have a gap in between as it would if the sidebar was nice and short.

I have thrown together a 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;
}

解决方案

An initial setting of a flex container is align-content: stretch.

This means that multiple lines in a flex container will expand to cover the length (in this case, height) of the container.

The sidebar is increasing the height of the container, causing your thumbnail content to distribute over a taller space.

You can override this default behavior with 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布局中删除行之间的大间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！