必须设置 flex-direction: column 才能使 justify-content 控制垂直间距，否则其始终作用于水平主轴；此时 justify-content 管上下（主轴），align-items 管左右（交叉轴），且父容器需有明确高度，多行时需用 align-content 配合 flex-wrap。
flex-direction: column 是垂直分布的前提
不设 flex-direction: column，justify-content 永远只在水平方向起作用——哪怕你写了 justify-content: space-between，子元素也绝不会上下拉开。Flex 的主轴默认是水平的（row），所有主轴相关属性（包括 justify-content、flex-grow、flex-shrink）都只对这个方向生效。
必须显式写：flex-direction: column，才能把主轴转成垂直方向，此时 justify-content 才真正控制“上下间距”。
- 漏掉这行，其他所有设置都白搭
- 别依赖浏览器默认值，
flex-direction没有“自动识别内容方向”这种智能逻辑 - 如果父容器同时被其他规则重置（比如某 CSS 重置库设了
flex-direction: row !important），得用更高优先级覆盖
justify-content 在垂直方向怎么用才有效
justify-content 控制的是主轴上的分布，所以当主轴是垂直方向时，它的取值效果就完全对应上下布局：
-
justify-content: flex-start→ 全部贴顶 -
justify-content: center→ 整体垂直居中（要求父容器有明确高度） -
justify-content: space-between→ 首项贴顶、末项贴底、中间等距（父容器必须有确定高度，否则无空间可分） -
justify-content: space-evenly→ 首尾到上下边距 + 中间间隙全部相等，视觉更均衡
常见失效原因：父容器 height 是 auto 或未设置，导致 Flex 认为“没空间可分配”，所有子项直接堆在顶部。解决办法是给父容器加 height 或 min-height（例如 min-height: 100vh 或 height: 400px）。
align-items 别和 justify-content 搞反了
一旦用了 flex-direction: column，两个对齐属性的作用轴就互换了：
-
justify-content管上下（主轴） -
align-items管左右（交叉轴）
这意味着：align-items: center 是让所有子元素水平居中（不是垂直）；justify-content: center 才是让它们垂直居中。很多人写错，是因为脑子里还按默认 row 方向记属性功能。建议每次写前先默念：“当前主轴是哪条？justify-content 就管它。”
另外，vertical-align 在 Flex 容器里完全无效——写了也不会报错，但等于没写。别把它和 align-items 混用。
多行场景下 vertical 分布要用 align-content
当子元素因宽度不够换行（即设置了 flex-wrap: wrap），justify-content 就不管“行与行之间”的距离了。此时真正起作用的是 align-content：
-
align-content: space-between→ 第一行顶边、最后一行底边、中间行等距 -
align-content: space-evenly→ 所有行（含首尾）到上下边距一致 -
align-content: center→ 所有行整体垂直居中
注意：align-content 对单行无效，且必须配合 flex-wrap: wrap 和父容器明确高度才可见效果。如果只有一行却硬加 align-content，它会被忽略，别怀疑 CSS，先检查是否真有多行。
真正容易被忽略的点：垂直分布不是靠“猜属性名”，而是靠确认主轴方向 + 匹配容器高度约束 + 区分单行/多行场景。少一个条件，效果就断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
