Flex子项堆叠间距问题求助：如何消除Flex容器中子项间距

问题说明 #

想让Flex子项完全堆叠在一起，已经给容器和子项设了items-start属性，但子项之间还是有间距，需要消除这些空隙。测试时的截图显示，h2标题和p标签两个子项之间存在明显的垂直空隙。

问题根源 #

你当前用了flex-wrap: wrap让子项换行，但容器默认是横向排列（flex-direction: row），这种情况下align-items: flex-start只是让子项在交叉轴顶部对齐，但容器高度大于子项总高度时，剩余空间会留在下方，看起来像是子项间距；另外，h2、p这类原生标签本身带有默认的行高、内边距，也可能导致视觉上的间距。

解决办法 #

办法1：改用纵向排列（最直接） #

如果是要让子项垂直堆叠，直接把容器的flex-direction设为column，代替row+flex-wrap的组合，子项会自动纵向紧密排列：

修改容器的类：

<div id="stock-div" class="lg:calc-w-3/10 h-full text-center border m-0 flex flex-col items-start">

对应的CSS要加上flex-column的样式：

.flex-column {
  flex-direction: column;
}

办法2：清除标签默认样式 #

即使保留flex-wrap，也可以清除h2和p的默认样式，避免自带的行高、边距产生空隙：

h2, p {
  margin: 0;
  padding: 0;
  line-height: 1; /* 可根据需求调整，比如和字体大小一致 */
}

办法3：用gap: 0强制清零间距 #

Flex布局的gap属性专门控制子项之间的间距，直接设为0就能确保没有额外空隙：

#stock-div {
  gap: 0;
}

完整修改示例 #

HTML代码 #

<div class="border h-full m-0">
  <div id="stock-div" class="lg:calc-w-3/10 h-full text-center border m-0 flex flex-col items-start gap-0">
    <h2 class="text-center text-base w-full border m-0">Stocks</h2>
    <p class="border m-0">Flex Item 2</p>
  </div>
</div>

CSS代码 #

body, html {
  height: 100%;
}

.flex {
 display: flex;
}

.flex-column {
  flex-direction: column;
}

.border {
  border: 1px solid black;
}

.w-full {
  width: 100%;
}

.h-\[300px\] {
  height: 300px;
}

.flex-row {
  flex-direction: row;
}

.flex-grow {
  flex-grow: 1;
}

.align-start {
  align-self: start
}

.items-start {
  align-items: flex-start;
}

.m-0 {
  margin: 0;
}

.h-full {
  height: 100%;
}

#stock-div {
  gap: 0;
}

h2, p {
  line-height: 1;
  padding: 0;
}

内容的提问来源于stack exchange，提问作者Pongbao