使用 CSS Flexbox 的 flex-direction: column 结合 justify-content: space-between，可让容器内子 div 在垂直方向上等距排列，首尾贴边、中间间距均等。

使用 css flexbox 的 `flex-direction: column` 结合 `justify-content: space-between`，可让容器内子 div 在垂直方向上等距排列，首尾贴边、中间间距均等。

要在垂直列中实现多个 <div> 元素之间的等距分布（即首项顶对齐、末项底对齐，中间元素间距完全相等），最简洁可靠的方案是采用 Flexbox 布局。

✅ 推荐方案：Flexbox + space-between

将所有目标 <div> 包裹在一个容器中，并为该容器设置以下样式：

.container {
  display: flex;
  flex-direction: column;
  height: 200px; /* 必须设定明确高度，否则 space-between 无效 */
  justify-content: space-between;
}

HTML 结构如下：

<div class="container">
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
</div>

? 关键说明：

• flex-direction: column 确保子元素垂直堆叠；
• justify-content: space-between 将可用空间平均分配到各元素之间（首尾不额外留空）；
• height（或 min-height）必须显式设置——这是 space-between 正常生效的前提，否则容器高度由内容撑开，无“剩余空间”可供分配。

⚠️ 注意事项

• 若子元素数量动态变化（如通过 JS 添加/删除），请确保容器高度足够且稳定，或改用 gap 配合 align-items 实现固定间距（适用于等距但不强制首尾贴边的场景）：

  .container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 所有相邻元素间统一间距 */
  }

• 不推荐使用 margin 手动控制间距（易导致首尾冗余空白或响应式错位）；
• 避免在 .container 上同时设置 padding 与 space-between，可能影响视觉对齐精度。

✅ 总结

justify-content: space-between 是实现首尾锚定、中间均分垂直布局的黄金组合，配合固定容器高度，即可优雅解决“列内等距分布”需求。灵活搭配 gap 或 align-items，还能覆盖更多排版变体。