当卡片数量动态变化且需在固定高度容器中均匀铺满可视区域时，可通过为非首张卡片设置负 margin-top 模拟“负间隙”效果，配合 flex-direction: column 和 align-items: center 实现视觉上的等距拉伸布局。
当卡片数量动态变化且需在固定高度容器中均匀铺满可视区域时，可通过为非首张卡片设置负 `margin-top` 模拟“负间隙”效果，配合 `flex-direction: column` 和 `align-items: center` 实现视觉上的等距拉伸布局。
在标准 CSS 中，gap 属性不支持负值，margin: auto 也无法产生负向收缩效果，而直接调整卡片高度又会破坏设计一致性。此时，利用相邻兄弟选择器 + 负 margin-top 是最简洁可靠的解决方案。
核心思路是：让每张卡片保持固定高度（如 30vh），再通过为除第一张外的所有卡片统一施加负上外边距（如 -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;
height: 100vh; /* 或具体高度，如 50vh */
width: 100%;
max-width: 332px;
margin: 0 auto;
padding-top: 200px; /* 如需顶部留白，可保留 */
}
.card {
background: linear-gradient(179deg, #e5e2da 0%, #8b8b8b 100%);
width: 100%;
height: 30vh;
border-radius: 20px;
box-shadow: 0px 0px 4px 1px #ababab;
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-weight: bold;
}
.card:not(:first-child) {
margin-top: -15vh; /* 关键：负值 ≈ 卡片高度的一半，实现视觉等距 */
}
✅ 注意事项与优化建议：
- 负
margin-top值推荐设为-(card-height / 2)（如30vh → -15vh），可确保相邻卡片中心点间距一致； - 若卡片数量极少（如仅 1–2 张），建议配合
min-height或媒体查询微调，避免过度重叠； - 避免在
.card上使用flex: 1或height: 100%，否则负 margin 可能被截断； - 如需响应式支持，可将
vh单位替换为rem或clamp()函数（例如clamp(200px, 30vh, 360px)）； - 动态插入卡片时（如 JS 渲染），该方案天然兼容，无需重新计算 gap —— 只要结构符合
.card:not(:first-child)规则即可生效。
该方法绕过 CSS Gap 的限制，在保持语义清晰、代码轻量的同时，完美复现 Figma 中「随容器高度自适应分布」的交互动效。
