flex-direction: column 并未让 justify-content 和 align-items 行为“反了”，而是主轴变为垂直方向，故 justify-content 控制垂直对齐（如 center 为垂直居中），align-items 控制水平对齐（如 center 为水平居中）；常见错误是忽略父容器未设 display: flex 导致该属性完全失效。
flex-direction: column 为什么让 justify-content 和 align-items 行为“反了”
不是属性变反了，是主轴和交叉轴换了方向——justify-content 始终只管主轴，align-items 始终只管交叉轴。设成 column 后，主轴变成垂直，所以 justify-content: center 就是垂直居中，align-items: center 才负责水平居中。
常见误判现象：
- 写了
justify-content: center却发现文字没水平居中，而是上下居中了 - 加了
align-items: flex-end想右对齐，结果内容贴底了 - 子项高度被拉满（
align-items: stretch默认行为），但你只想控制宽度
关键判断点：每次改 flex-direction，都要重问一句——“当前主轴是哪个方向？”
为什么加了 flex-direction: column 子项还是横着排
根本原因：父容器压根没进入 Flex 上下文。flex-direction 是个“无效属性”，除非它所在的容器已声明 display: flex 或 display: inline-flex。
排查清单：
- 检查父容器是否漏写了
display: flex - 确认没有被
display: block !important等规则覆盖 - 查看是否用了
float、position: absolute或position: fixed，这些会让子项脱离 Flex 管控 - 注意某些 UI 库（如 Ant Design、Element Plus）的组件默认不设
display: flex，需手动加
flex-direction: column 下子项间距和尺寸为什么全乱了
因为原来靠 margin-right 控制的水平间距，在垂直主轴下失效；而固定 width 的子项在 column 布局里仍作用于交叉轴，容易撑破容器或被压缩。
实操建议：
- 用
gap替代margin控制项目间距，它不依赖主轴方向，且不会与 margin 叠加 - 避免在子项上同时写
margin-bottom和父容器设gap，会导致间距翻倍 - 若需子项宽度自适应，别依赖
width: 100%，改用align-items: stretch（默认）或显式设width: auto - 圆点类元素（如步骤条数字）建议用
font-size驱动宽高（width: 2em; height: 2em;），方便响应式缩放
column 布局下滚动、高度、换行为什么都不生效
flex-direction: column 只定义排列方向，不承诺高度分配或溢出处理。它不会自动让容器“撑开”或“可滚动”，一切取决于你是否给了明确的高度约束和溢出策略。
必须检查的三项：
- 父容器是否有可计算高度？比如
min-height: 100vh、height: 400px，或来自上层flex: 1的空间分配 - 需要滚动时，必须显式写
overflow-y: auto；height: fit-content不会触发滚动条 -
flex-wrap: wrap在column下被浏览器忽略，真要“纵向内容分多列”，得切回row+flex-wrap: wrap，或改用display: grid
最常被忽略的是：align-content 在 column + flex-wrap: wrap 场景下才起作用，但它控制的是“列与列之间”的间距，不是项目之间——这个语义切换很容易被当成 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
