当卡片数量动态变化且需在固定高度容器中均匀铺满视口时，可通过为非首张卡片设置负 margin-top 模拟“负间隙”，结合 flex-direction: column 与 align-items: center 实现视觉上的等距拉伸效果。
当卡片数量动态变化且需在固定高度容器中均匀铺满视口时，可通过为非首张卡片设置负 `margin-top` 模拟“负间隙”，结合 `flex-direction: column` 与 `align-items: center` 实现视觉上的等距拉伸效果。
在标准 CSS 中，gap 属性不支持负值，margin: auto 也无法产生负向收缩效果，而直接调整卡片高度又会破坏设计一致性。此时，利用相邻兄弟选择器 :not(:first-child) 配合负上外边距（margin-top） 是一种简洁、兼容性好且无需 JavaScript 的解决方案。
该方法的核心逻辑是：让每张卡片保持固定高度（如 30vh），再通过为第二张及后续卡片统一施加负 margin-top（例如 -15vh），使它们向上偏移，从而在视觉上形成“上下重叠+等距错位”的分布效果。只要负间距值合理（通常取卡片高度的一半左右），多张卡片就能在有限容器高度内自然“撑开”并均匀覆盖整个区域。
以下是可直接运行的完整示例：
<div class="cards-wrapper"> <div class="card"><h3>Card 1</h3></div> <div class="card"><h3>Card 2</h3></div> <div class="card"><h3>Card 3</h3></div> <div class="card"><h3>Card 4</h3></div> <div class="card"><h3>Card 5</h3></div> </div>
.cards-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh; /* 确保容器占满视口 */
padding: 2rem;
gap: 0; /* 显式关闭 gap，避免干扰 */
}
.card {
width: 200px;
height: 30vh;
background: linear-gradient(179deg, #e5e2da 0%, #8b8b8b 100%);
border-radius: 20px;
box-shadow: 0 0 4px 1px #ababab;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.card:not(:first-child) {
margin-top: -15vh; /* 关键：负外边距驱动重叠式等距布局 */
}✅ 注意事项：
- 负
margin-top值建议设为卡片高度的40%~60%（如30vh卡片对应-12vh ~ -18vh），过大会导致顶部溢出，过小则间距不足； - 容器需有明确高度（如
min-height: 100vh或固定height），否则 Flex 主轴无法计算布局基准； - 若卡片内容高度不固定，建议改用
min-height+flex-grow组合方案，或配合clamp()函数做响应式微调； - 此方案在所有现代浏览器中均原生支持，无需前缀或 Polyfill。
该技巧本质是“视觉等距”而非“数学等分”，但因其简洁、可控且适配动态数据，在 Figma 原型落地、仪表盘卡片布局、Kiosk 屏幕展示等场景中已被广泛验证为高效实践。
