justify-content: space-between 在垂直方向生效的前提是设置 flex-direction: column 且父容器有明确高度；否则它只在水平方向起作用，vertical-align 在 Flex 布局中完全无效。
justify-content: space-between 在垂直方向根本不起作用
因为 justify-content 只控制主轴（main axis）上的对齐，而默认主轴是水平的。如果你没显式设置 flex-direction，那 justify-content: space-between 永远只在水平方向生效——哪怕你盒子高度很大、内容看起来“竖着排”，它也压根不碰垂直间距。
真正起效的前提是：让主轴变成垂直方向。
- 必须加
flex-direction: column，否则justify-content对垂直间距完全无感 - 父容器得有明确高度（比如
height: 400px），否则子项挤在一起，space-between没空间可“分” - 子元素不能用
margin或align-self干扰主轴布局，否则间距会错乱
vertical-align 和 flex 垂直等距是两套逻辑
vertical-align 是 inline / table-cell 场景下的老方案，和 Flex 完全无关。一旦用了 display: flex，vertical-align 就彻底失效，连警告都不会报——它只是静静被忽略。
- 别在 flex 容器里写
vertical-align: middle，写了也没用 - 想撑开父容器高度？靠子项自身高度或
min-height，不是靠vertical-align - 如果看到垂直没对齐，先检查是不是忘了设
flex-direction: column，而不是怀疑vertical-align
space-between 在垂直方向的真实表现
它会让第一个子元素贴顶、最后一个贴底，中间所有间隙均分——但前提是：所有子元素高度固定或已渲染，且父容器高度足够。
```css
.container {
display: flex;
flex-direction: column;
height: 300px; /* 必须有 */
}
.item {
height: 40px; /* 推荐固定，否则计算可能意外 */
}
```
- 如果子项高度不一致（比如有的含文字换行），
space-between仍按 top/bottom 边缘对齐，视觉上可能“不等距” - IE10–11 对
flex-direction: column+justify-content: space-between支持不稳定，实际项目中建议加flex: 0 0 auto到子项防塌陷 - 移动端 Safari 旧版本曾有渲染抖动，加
transform: translateZ(0)到父容器可缓解
替代方案：gap 更干净，但兼容性要查
如果只是想要“子项之间等距”，gap 是更直接的选择，它不依赖主轴方向，也不强制首尾贴边。
-
gap: 16px在flex-direction: column下就是垂直间距，无需操心首尾位置 - Chrome 84+、Firefox 63+、Safari 14.1+ 支持；iOS Safari 14.5+ 才稳定，低于此版本需回退到
margin-bottom手动控制 - 注意：
gap不影响首项顶部和末项底部的空白，那是由父容器 padding 或子项 margin 控制的
Flex 垂直等距的关键不在 justify-content 本身，而在你有没有真正把它“请到垂直主轴上来”。漏掉 flex-direction: column 或父容器高度，再调十遍 space-between 也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
