如何缩小flex-wrap布局中行列项目间距？适配动态高度与数量

期望效果 #

当前效果 #

当前实现代码 #

CSS代码 #

body{
  display:block;
  padding: 5px;
}

.container{
  background: #f8f9fa;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  width: 100%;
  padding: 10px;
  gap:10px;
}

.item1{
  width: 250px;
  height: 100px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item2{
  width: 250px;
  height: 150px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item3{
  width: 250px;
  height: 250px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item4{
  width: 250px;
  height: 50px;
  background: #a5bdb5;
  border-radius: 5px;
}

.item5{
  width: 250px;
  height: 130px;
  background: #a5bdb5;
  border-radius: 5px;
}

HTML代码 #

<html>
  <body>
    <div class="container">
      <div class="item1">
      </div>
      <div class="item2">
      </div>
      <div class="item3">
      </div>
      <div class="item4">
      </div>
      <div class="item5">
      </div>
    </div>
  </body>
</html>

Flex布局下的修复方案 #

问题根源是Flex容器默认的align-content: stretch属性——它会把容器内的剩余空间平均分配到各行之间，导致行间距异常增大。只需给.container添加一行属性即可解决：

align-content: flex-start;

修改后的容器CSS：

.container{
  background: #f8f9fa;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  align-content: flex-start; /* 新增属性 */
  width: 100%;
  padding: 10px;
  gap:10px;
}

此时各行会紧贴容器顶部，行之间仅保留你设置的gap间距，完全符合预期效果。

备选实现方法（若Flex不满足需求） #

1. CSS Grid布局 #

Grid天生适配这种不规则响应式网格，无需额外对齐设置，直接通过列自动填充实现：

.container{
  background: #f8f9fa;
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px);
  gap:10px;
  width: 100%;
  padding: 10px;
}

项目会自动按列填充，行间距严格遵循gap设置，完全匹配你的期望效果。

2. CSS多列布局 #

适合流式排列场景，通过设置列宽和间距实现响应式，但内容顺序为从上到下、从左到右，与Flex/Grid的横向排列顺序不同：

.container{
  background: #f8f9fa;
  column-width: 250px;
  column-gap: 10px;
  width: 100%;
  padding: 10px;
}
/* 避免项目被列截断 */
.container > div{
  break-inside: avoid;
  margin-bottom: 10px;
}

内容的提问来源于stack exchange，提问作者vishnu.k