必须设flex-direction: column，因为margin-top: auto和flex-grow: 1仅在主轴方向生效；主轴垂直时footer才能沉底，水平主轴下margin-top被忽略，且footer必须是flex容器的最后一个直接子元素。
为什么必须设 flex-direction: column
因为 margin-top: auto 或 flex-grow: 1 只在 flex 主轴方向起作用。主轴垂直时，margin-top: auto 才能把 footer 推到底部；主轴水平（flex-direction: row）时，margin-top 属于交叉轴，浏览器直接忽略——footer 就卡在顶部不动。
这不是兼容性问题，是 CSS Flex 规范明确规定的：自动外边距只对主轴生效。别试图用 justify-content: flex-end 替代，它会让 header、main、footer 全部沉底，破坏内容流。
-
flex-direction: column是必要前提，不是可选项 - 如果用了
row，哪怕其他所有设置都对，footer 也不会动 - 检查失效时，优先确认父容器是否显式写了
flex-direction: column，而不是只写了display: flex
父容器高度链断在哪，flex-direction: column 就白设了
绝大多数“footer 不贴底”问题，根源不在 flex 方向，而在高度基准缺失。flex 布局需要一个明确的可用高度来分配空间，而 html 和 body 默认不占满视口。
必须保证高度链完整：
-
html, body { min-height: 100vh; margin: 0; }—— 推荐写法，避免内容超长被截断 - 包裹结构的容器（如
.app或.layout）必须设display: flex; flex-direction: column; min-height: 100vh; - 不要只给
body加display: flex：部分浏览器（如旧版 Safari）不支持对body直接做 flex 布局，且默认margin会干扰计算
margin-top: auto 和 flex-grow: 1 该选哪个加在哪儿
两种主流做法都能实现粘性底部，但行为逻辑不同，适用场景也不同：
- 给
footer加margin-top: auto：轻量、直接，footer 自己“沉底”。要求它是 flex 容器的**直接子元素**，且排在main之后。无需动main，也不怕中间区块增删 - 给
main加flex-grow: 1：更主动控制剩余空间分配。适合需要确保main始终撑满可用区域的场景（比如带侧边栏的布局）。但若同时给footer设了height或flex-shrink: 0，可能引发高度冲突 - 千万别在
footer上同时写flex-grow: 1和margin-top: auto—— 后者会覆盖前者，且可能导致 footer 拉伸盖住内容
iOS Safari 的 100vh 抖动问题怎么应对
地址栏收放、软键盘弹出时，iOS WebKit 会动态重算视口高度，导致 min-height: 100vh 瞬间变小，footer 悬空半秒。这不是代码写错了，是平台限制。
纯 CSS 无法彻底规避，但可以缓解：
- 用
100dvh替代100vh（Chrome 105+、Safari 16.4+ 支持），它基于“动态视口高度”，能响应键盘弹出 - 降级方案：JS 监听
resize，检测window.innerHeight变化，动态更新容器高度（慎用，避免触发重排） - 底线思维：接受这个抖动是 iOS Web 的固有表现，重点确保布局不因此错乱或遮挡关键操作区域
最常被忽略的一点：无论用哪种方式，footer 必须是 flex 容器的**最后一个直接子元素**，且不能被 display: none、visibility: hidden 或条件渲染中途移除——否则 flex 布局失去锚点，整个粘性逻辑就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
