flex-direction: column 时 justify-content 控制垂直方向对齐，需父容器有明确高度才能生效；space-between 实现首项贴顶、末项贴底、中间项等距分布，单子项时等效于 flex-start。
flex-direction: column 时 justify-content 控制的是垂直方向
当设置 flex-direction: column 后，主轴就从默认的水平方向（x 轴）变成垂直方向（y 轴），此时 justify-content 的作用对象就变成了**垂直方向上的分布**，不再是左右对齐，而是上下对齐。
常见错误是仍按“水平居中”直觉去理解 justify-content: center，结果发现元素没动——其实它已经居中了，只是你没给父容器设高度，或子元素本身没占空间，导致视觉上“看不见效果”。
- 必须确保父容器有明确高度（如
height: 300px或min-height: 100vh），否则justify-content在垂直方向无参考基准 - 子元素不能是空内容或
display: none，否则 flex 项目尺寸为 0，居中无意义 -
justify-content: space-between在垂直方向表现为：首项贴顶、末项贴底、中间项等距分布；若只有两个子项，它们会分别顶和底对齐
justify-content: space-between 在垂直布局中的典型用法
这个值在导航栏、表单分组、卡片列表等需要“顶部固定 + 底部操作按钮”结构的场景中非常实用。比如一个带标题、正文、确认按钮的弹窗容器：
.popup {
display: flex;
flex-direction: column;
height: 400px;
justify-content: space-between;
padding: 20px;
}
.title { font-size: 1.5rem; }
.content { flex: 1; overflow-y: auto; }
.btn-confirm { align-self: flex-end; }
注意：space-between 不会压缩首尾项，只分配中间空白；如果只有 1 个子项，它会等效于 flex-start（贴顶），不是居中——这点常被忽略。
- 若想单个子项垂直居中，用
justify-content: center，不是space-between - 若想首项贴顶、末项贴底、且中间还有其他项，则必须 ≥3 个子项，
space-between才能体现“两端分散”语义 - 配合
align-items: center可同时实现水平居中，避免按钮靠左偏移
align-items 和 justify-content 的职责别混淆
初学者容易把 align-items 当成“垂直居中”，其实它的作用轴取决于 flex-direction：当主轴是 column 时，align-items 控制的是**水平方向**（即交叉轴），而 justify-content 才管垂直方向（即主轴）。
-
justify-content: center→ 垂直居中（主轴） -
align-items: center→ 水平居中（交叉轴） - 两者合用才能实现真正的“水平垂直居中”
- 若只写
align-items: center却没设justify-content，子项会垂直堆叠在顶部，仅水平居中
space-evenly 与 space-around 在垂直方向的差异
这两个值在垂直布局中也常被误用。space-evenly 让所有间隙（包括首项前、末项后）完全相等；space-around 则让每个子项“左右”（此处是上下）各分一半间距，导致首项前、末项后的空白只有中间间隙的一半。
例如三个子项在 height: 300px 容器中：
-
space-evenly：4 段空白均分剩余空间（首前、项间×2、末后） -
space-around：首项前 = 末项后 = 项间 / 2，总空白量相同但分布不对称 - 真要严格两端对齐+等距，优先选
space-between；要视觉更宽松，再考虑space-around或space-evenly
实际调试时，打开浏览器开发者工具，勾选“Flexbox overlay”，能直观看到主轴/交叉轴方向和间距分布——这是最容易被跳过的验证步骤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
