flex-direction: column 是必须的，因为只有主轴垂直时 margin-top: auto 才能在交叉轴方向吞掉剩余空间将 footer 推至容器底边；若设为 row 则 margin-top 属于无效交叉轴，且 html、body 及包裹容器须显式设高度基准，footer 还需是 flex 容器的直接子元素并排在内容之后。
为什么 flex-direction: column 是必须的
页脚沉底靠的是布局流向，不是 margin 或定位。只有 flex-direction: column 把子元素从上到下排，margin-top: auto 才能把 footer 推到容器底边。如果误设成 row，所有元素横着排，margin-top 完全无效——它只在主轴垂直时起作用。
常见错误现象：
- 页脚卡在顶部或中间不动
- 加了
margin-top: auto却没反应 - 调试时反复调
justify-content，但问题不在那里
真正要检查的是：父容器是否同时写了 display: flex 和 flex-direction: column，而不是只写了 flex: 1 或漏掉方向声明。
html 和 body 必须显式设高度基准
浏览器默认的 body 没有高度，min-height: 100vh 在子级 flex 容器里会失效。必须让根级有明确高度参照，否则整个 flex 布局“没地方可撑”。
实操建议：
-
html, body { height: 100%; margin: 0; }—— 这是最稳的起点，比只设min-height: 100vh更可靠 - 若用包裹容器（如
.app），则.app { display: flex; flex-direction: column; min-height: 100vh; } - 千万别只给
body设min-height: 100vh而忽略html，iOS Safari 和旧版 Edge 会直接不认
footer 只需 margin-top: auto 就够了
在 flex-direction: column 容器中，footer 只要不是第一个子元素，加 margin-top: auto 就能自然沉底。不需要 flex: 0 0 auto，也不需要 align-self: flex-end，更不要同时写 flex: 1 和 margin-top: auto——后者会覆盖前者，造成计算冲突。
关键约束：
-
footer必须是 flex 容器的**直接子元素**，且排在main或内容区之后 - 别给
footer设height+margin-top: auto，旧版 Safari 会算错剩余空间，导致主体塌缩 - 不用
flex-shrink: 0也能工作，除非你发现窄屏下按钮被压缩（Safari 对 flex 项默认缩放较激进）
iOS Safari 的 100vh 抖动问题怎么应对
地址栏收放、软键盘弹出会动态改变视口高度，min-height: 100vh 可能瞬间失效，导致 footer 悬空半秒。这不是写法错误，是 iOS WebKit 的固有限制，无法靠纯 CSS 彻底规避。
能做的有限缓解：
- 避免在表单页依赖
100vh做精确定位；改用min-height: 100%+ 显式高度链（前提是父级都有高度） - 键盘弹出时，监听
resize事件，临时切换为position: fixed，但要注意无障碍影响 - 记住：只要
footer是语义化结构中body的直接子元素、位置正确、flex 配置完整，抖动只是视觉瞬态，布局逻辑本身没坏
最易被忽略的点：HTML 结构错误——比如 footer 写在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
