justify-content: space-between 在垂直布局中生效需满足三个前提：一是设置 flex-direction: column，二是父容器有明确高度（如 height 或 min-height），三是避免与 align-items: stretch 等拉伸属性冲突。
justify-content: space-between 要配合明确高度才生效
很多情况下写完 justify-content: space-between 发现没反应，根本原因是容器没有显式高度。Flex 的 space-between 是把“剩余空间”均分到元素之间，如果容器高度由内容撑开，就不存在“剩余空间”。
实操建议：
- 给父容器设
height（如height: 300px）或min-height（如min-height: 100vh） - 若用
min-height，旧版 Safari 可能不触发，可加一句height: 0兼容 - 避免用
flex: 1或align-items: stretch意外拉伸子元素，干扰间距计算
flex-direction: column 是前提，别漏掉
justify-content: space-between 默认作用于主轴，而主轴方向由 flex-direction 决定。想在垂直方向分布，必须先让主轴变成纵向——也就是设置 flex-direction: column。
常见错误：
- 只写
justify-content: space-between，没写flex-direction: column→ 子元素仍在水平排列，间距出现在左右 - 误以为
align-items: center能控制垂直分布 → 它只管交叉轴对齐（此时是水平方向），不影响元素间间距 - 在子元素上设
margin-bottom模拟等距 → 响应式下易错位，且首尾多出空白
动态数量子元素时，gap 更可控
当子元素数量不确定（比如 JS 动态渲染列表），space-between 会导致首尾贴边、中间间距随数量变化——有时这不是想要的效果。这时 gap 更直观稳定。
用法要点：
-
gap: 1rem直接设定相邻元素间距，不管有多少个子元素 - 需搭配
align-items: center（若希望所有子元素水平居中） -
gap在 Chrome 85+/Firefox 63+/Safari 14.1+ 支持良好；IE 完全不支持，需降级为margin+ JS 计算 - 注意：不要和
justify-content: space-between同时用，行为不可预测
align-content 不适用于单行垂直分布
有人看到“content”就以为 align-content: center 能让垂直列居中，但它只在多行 flex 容器（即 flex-wrap: wrap 且实际换行了）中起作用。单列垂直布局里它完全无效。
真正该用的组合只有两个：
- 首尾锚定、中间均分 →
flex-direction: column+justify-content: space-between+ 明确高度 - 固定间距、自由堆叠 →
flex-direction: column+gap: X
别在单行场景里折腾 align-content，它不会产生任何视觉变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
