flex-direction: column 未生效的主因是父容器未设 display: flex；子元素若含 float、position: absolute 或 display: none 等样式也会破坏弹性上下文；justify-content 始终控制主轴（column 下为垂直方向），align-items 控制交叉轴（水平方向）；vertical-align 在 flex 中无效；ios safari 旧版本存在兼容问题，需避免依赖 min-height、显式设 height 或 flex: 1，并注意 overflow 设置。
flex-direction: column 为什么没让子元素垂直排列？
常见错误是只写了 flex-direction: column，但父容器没设 display: flex，或者子元素被其他样式（比如 float、position: absolute）干扰了弹性上下文。Flex 布局必须先激活，否则 flex-direction 完全不生效。
实操建议：
- 确认父容器有
display: flex或display: inline-flex - 检查子元素是否意外设置了
display: none、visibility: hidden或height: 0 - 避免在子元素上用
float—— Flex 容器内浮动会失效，且可能破坏布局流
column 方向下，justify-content 和 align-items 的作用反过来了？
不是“反过来了”，而是坐标系变了：justify-content 始终控制主轴对齐，而主轴方向由 flex-direction 决定；设为 column 后，主轴变成垂直方向，所以 justify-content: center 就是垂直居中，align-items: center 才是水平居中。
容易踩的坑：
- 误以为
justify-content总是“水平对齐”——它只管主轴，不管方向 - 忘记给父容器设明确高度（比如
min-height: 100vh），导致justify-content: center看不出效果 -
align-items: stretch默认拉伸子元素高度，若子元素有height或min-height，会被覆盖或冲突
vertical-align 在 flex column 里还有用吗？
完全没用。vertical-align 只对 inline、inline-block 元素或表格单元格生效，Flex 子项默认是 flex-item，已脱离常规文档流，该属性被忽略。
替代方案更直接：
- 垂直居中：用
justify-content: center（主轴） +align-items: center（交叉轴） - 顶部对齐：
justify-content: flex-start（默认值） - 底部对齐：
justify-content: flex-end
如果看到加了 vertical-align: middle 却没反应，基本可以删掉它。
移动端 iOS Safari 对 flex-direction: column 有兼容问题？
现代 iOS Safari（iOS 12.2+）完全支持 flex-direction: column，但老版本（如 iOS 9–10）对某些组合写法敏感，比如和 flex-wrap: wrap、min-height 混用时可能不触发伸缩。
稳妥做法：
- 避免只依赖
min-height触发弹性行为，显式设height或用flex: 1让子项撑开 - 不用
flex: 0 0 auto这类简写在旧 iOS 上，改用完整三值写法或拆成flex-grow/flex-shrink/flex-basis - 测试真机，别只信模拟器 —— 某些渲染差异（如滚动容器内 flex 行为）只在真实 Safari 中暴露
最常被忽略的是：flex column 布局里，子元素如果内容超长又没设 overflow，在 iOS 上可能直接溢出不可见，而不是滚动 —— 记得给需要滚动的子项加 overflow-y: auto 和固定 max-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
