flex-direction: column 将主轴设为纵向，使子元素沿Y轴堆叠；此时justify-content控制上下对齐，align-items控制左右对齐，需配合height和center值才能实现垂直居中。
flex-direction: column 是垂直布局的核心
Flexbox 默认主轴是水平方向（flex-direction: row），要让子元素在垂直方向排列，必须显式把主轴改为纵向。最直接的方式就是设置 flex-direction: column —— 这会把主轴从左到右变成从上到下，所有 flex 项目自然沿 Y 轴依次堆叠。
注意：这不是“让元素居中”或“撑满高度”的操作，只是改变排列方向。后续是否居中、对齐、间距，取决于其他 flex 属性。
-
flex-direction: column使justify-content控制的是**垂直方向的主轴对齐**（即上下对齐） -
align-items则控制**水平方向的交叉轴对齐**（即左右对齐） - 如果容器没有明确高度，子元素仍按内容高度排列，不会自动撑满父容器
为什么只改 flex-direction 不一定看到“垂直居中”效果
很多人设了 flex-direction: column 后发现元素还是贴着顶部，以为没生效。其实它已生效——只是默认 justify-content: flex-start，也就是主轴起点对齐，而主轴现在是纵向，所以所有子元素紧贴容器顶部。
要实现常见的“垂直居中”，需配合 justify-content: center；若还要水平居中，则加 align-items: center：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh; /* 必须有高度，否则 justify-content 无参考 */
}- 缺
height或min-height会导致justify-content: center看不出效果 -
align-items: center在column下等价于让所有子元素宽度一致并水平居中（除非子元素本身设了width） - 若子元素中有文本，还需注意
line-height或margin可能干扰视觉居中
column-reverse 和实际业务中的使用场景
flex-direction: column-reverse 把主轴倒过来：从下到上排列。它不是为了“反向居中”，而是解决特定 UI 需求，比如聊天记录列表（新消息在底部）、日志流（最新条目置顶但滚动到底部才看到）、或倒序时间线。
- 此时
justify-content: flex-start会让第一个子元素贴在容器底部 -
justify-content: flex-end反而把它推到顶部 - 滚动容器中搭配
flex-direction: column-reverse时，需用scrollIntoView({ block: 'end' })或手动调整scrollTop，否则新内容添加后视口不会自动滚动到底
别忽略 flex-wrap 和 min-height 的组合影响
当子元素总高度超过容器，且未设 flex-wrap: wrap（其实 column 下 wrap 意义有限），溢出行为由 overflow 决定。但更隐蔽的问题是：min-height: fit-content 或 min-height: -webkit-fit-content 在某些旧版 Safari 中不生效，导致容器高度塌陷，垂直布局失效。
- 稳妥做法是给容器设明确
min-height，如min-height: 200px或min-height: 100dvh -
flex-wrap: wrap在column下基本无效——flex 项目无法“换行”到右侧，除非你同时设了width并让项目横向超限，但这已脱离垂直布局本意 - 避免对 flex 容器设
height: 0或overflow: hidden后又期望子元素撑开它，flex 主轴方向改变后，这种限制依然起作用
真正卡住人的往往不是 flex-direction 本身，而是它改变了 justify-content 和 align-items 的作用轴向，而开发者还按 row 时的习惯去理解它们。再加个没设高度的容器，问题就藏得更深了。
