根本原因是Flex布局未激活，父容器缺少display: flex或inline-flex；子元素若含float、position: absolute、display: none等也会破坏弹性上下文。
flex-direction: column 为什么没让子元素垂直排列？
根本原因不是属性写错了，而是 Flex 布局没激活。只加 flex-direction: column 不起作用——父容器必须先有 display: flex 或 display: inline-flex，否则整个 Flex 上下文不存在，flex-direction 完全被忽略。
常见干扰项包括：
- 子元素设置了
float: left或float: right：Flex 容器内浮动失效，且会破坏弹性流 - 子元素用了
position: absolute：脱离文档流，不再参与 Flex 排列 - 子元素是
display: none、visibility: hidden或height: 0：无法渲染，自然不占位
justify-content 和 align-items 在 column 下怎么用？
它们没“反向”，只是主轴变了：justify-content 始终管主轴（现在是垂直方向），align-items 始终管交叉轴（现在是水平方向）。
典型组合：
- 垂直居中 + 水平居中：
justify-content: center+align-items: center - 顶部对齐（默认）：
justify-content: flex-start - 底部对齐：
justify-content: flex-end - 左对齐（子元素宽度不固定时）：
align-items: flex-start - 内容撑满宽度并居中：
align-items: stretch（默认值，但会被子元素的width或max-width覆盖）
注意：vertical-align 在 Flex 子项上完全无效，删掉它。
为什么 justify-content: center 看不出效果？
因为容器没有可计算的高度。Flex 的对齐逻辑需要参考容器尺寸，justify-content: center 在垂直方向生效的前提是父容器有明确高度（如 height: 100vh）、最小高度（如 min-height: 200px）或由内容撑开（但此时若子项高度总和小，仍可能贴顶）。
容易忽略的点：
- 父容器设了
height: 0、min-height: 0或overflow: hidden，导致内容被裁剪或无法伸展 - 父容器是
position: absolute且没设top/bottom，高度坍缩为 0 - 在移动端 iOS Safari 旧版本（iOS 9–10）中，
min-height可能不触发弹性行为，建议显式用height或flex: 1
column 布局下要滚动或换列，要注意什么？
flex-direction: column 本身不控制是否滚动或换行；滚动靠 overflow-y: auto，换列靠 flex-wrap: wrap 配合受限的容器尺寸。
多列垂直流（如座位表、标签云）的关键条件：
- 容器必须有明确
height（如height: 200px）和width（如width: 400px） - 启用
flex-wrap: wrap，此时溢出高度的内容会生成新“列”（即右侧新纵列） - 用
align-content: flex-start控制这些纵列整体左对齐（不是align-items） - 推荐用
gap控制列间距，比margin更可靠；旧浏览器需回退margin
别指望 flex-direction: column 自动处理滚动或换列——它只管“怎么堆”，不管“堆不下怎么办”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
