仅靠 flex-direction 无法自动堆叠，必须配合 display: flex + 媒体查询显式切换，且小屏下子项宽度需手动设为100%或依赖align-items: stretch；常见错误是媒体查询中只写flex-direction: column而父容器未声明display: flex，导致弹性上下文未激活。
直接结论：仅靠 flex-direction 无法自动堆叠，必须配合 display: flex + 媒体查询显式切换，且小屏下子项宽度需手动设为 100% 或依赖 align-items: stretch。
为什么加了 flex-direction: column 却没堆叠？
常见错误是只在媒体查询里写了 flex-direction: column，但父容器本身没设 display: flex。Flex 属性只对 Flex 容器生效，flex-direction 不是“开关”，它不会让普通块级元素突然变成垂直排列。
- 检查父容器是否在所有断点下都声明了
display: flex（不能只在桌面端写） - 确认媒体查询的断点值被真正触发（比如用
max-width: 767px，别写成min-width） - 避免父容器有
overflow: hidden或固定height，它们会截断垂直堆叠后的内容
堆叠后子项不占满宽度，怎么办？
在 flex-direction: column 下，主轴是垂直方向，交叉轴仍是水平方向——所以子项默认 width 是 auto，不会自动撑满容器宽度。
- 给子项加
width: 100%最直接可靠（尤其对input、button等替换元素） - 或利用默认的
align-items: stretch，但前提是父容器有明确宽度（如width: 100%或无限制的max-width） - 避免混用
float或inline-block，它们会破坏 flex 行为
用 gap 还是 margin 控制堆叠间距？
推荐优先用 gap。在 column 布局下，margin-bottom 会导致最后一项也留空，视觉上多出一段空白；而 gap 只作用于项与项之间，末尾不留空。
-
gap: 12px比margin-bottom: 12px更干净，尤其在动态渲染列表中（:last-child不一定准确） - 旧版 Safari（gap，可降级为
margin-bottom+:last-child { margin-bottom: 0 } - 如果已有
margin规则，别叠加gap，否则间距翻倍
iOS Safari 中 flex-direction: column 不生效？
不是 bug，是部分老版本 Safari 对媒体查询内单一 flex 属性的解析延迟。它可能读取了 flex-direction，却忽略了容器本应具备的 display: flex 上下文。
- 在媒体查询内同时写全：
display: flex; flex-direction: column; flex-wrap: nowrap; - 避免给容器设
min-height或height，它们可能干扰 flex 主轴计算 - 移除自定义 CSS 重置中对
order的隐式设置，防止意外排序干扰堆叠顺序
真正容易被忽略的点是：堆叠不是“加个属性就完事”，而是“容器变 flex + 主轴切垂直 + 子项控宽 + 间隙重设”四步缺一不可。漏掉任意一步，都会在某个机型或缩放比例下突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
