可行，但需配合min-height:100vh、html/body设height:100%、header/footer用flex:0 0 h、main用flex:1（即flex:1 1 0）并设overflow-y:auto，否则页脚塌陷或滚动异常。
圣杯布局用 flex-direction: column 真的可行吗？
可行，但必须配合 min-height: 100vh 和子项的 flex 分配逻辑，否则页脚会塌陷或内容区不撑满。纯靠 column 不够，它只定义主轴方向，不解决高度分配问题。
典型错误是只写 display: flex; flex-direction: column; 却没给容器设最小高度，导致在内容少时页脚上浮；或者把 header/main/footer 全设成 flex: 1，结果页脚被压缩消失。
-
html和body都要设height: 100%，否则100vh在某些嵌套场景下失效 -
main区域必须用flex: 1（等价于flex: 1 1 auto），不能只写flex: 1 0 auto，否则可能不伸缩 - 如果
header或footer有固定高度，建议显式设flex: 0 0 60px，避免被意外拉伸
为什么不用 flex-direction: row 而选 column？
因为圣杯本质是「头-身-尾」垂直流，column 更贴近语义和 DOM 顺序，也天然适配移动端滚动行为。用 row 强行模拟需要额外 wrapper + height: 100% + 多层 flex 嵌套，维护成本高、兼容性差（尤其 Safari 旧版）。
关键区别在于：用 column 时，main 的弹性扩张是沿纵轴自然发生的；而 row 方案中，你得靠 align-items: stretch 和父容器高度传递来“骗”出高度，稍有遗漏就失败。
立即学习“前端免费学习笔记（深入）”；
- IE11 对
flex-direction: column+flex: 1的支持比row方案更稳定 - 当
main内容超长需滚动时，column方案只需对main设overflow-y: auto，不会影响 header/footer 定位 - 不需要额外
position: absolute或margin抵消技巧，减少意外重绘
flex: 1 在 column 圣杯里到底怎么分高度？
它不是按比例分，而是「剩余可用空间」分配。假设容器高 100vh，header 占 80px，footer 占 60px，那 main 拿到的就是 100vh - 140px，且这个值会随视口变化实时更新。
容易踩的坑是误以为 flex: 1 = “占 1 份”，其实它和兄弟项的 flex-basis 值强相关。如果 header 没设 flex-basis（比如只写了 height: 80px），部分浏览器会把它算作 flex-basis: auto，导致 main 的剩余空间计算出错。
- 推荐统一用
flex缩写：如header { flex: 0 0 80px; }，明确禁止收缩、不设增长、基础尺寸为 80px -
main { flex: 1; }等价于flex: 1 1 0，其中flex-basis: 0是关键——它让分配从零开始，避免内容高度干扰剩余空间计算 - 不要给
main设height或min-height，否则会和flex规则冲突
移动端适配和内容溢出时要注意什么？
圣杯布局在小屏上最常出问题是 main 内容过长导致整体页面高度超过视口，但 footer 仍粘在底部下方——这不是 bug，是预期行为。真正要防的是 main 内部滚动失效或出现双滚动条。
核心原则：只让 main 自己可滚动，外层容器保持自然流。一旦给 body 或根 flex 容器加 overflow: hidden，就可能截断内容或破坏 iOS 滚动惯性。
-
main必须设overflow-y: auto，且不能依赖max-height——要用flex自动算出的高度作为滚动边界 - 如果
main里有绝对定位元素，注意它的top/bottom是相对于main，不是整个视口 - Safari iOS 15.4+ 有个已知问题：当
main含iframe或canvas时，flex: 1可能暂时失算，临时解法是给main加transform: translateZ(0)强制重绘
事情说清了就结束。圣杯布局的弹性本质不在方向选择，而在对 flex-basis 和剩余空间的精确控制——方向只是让这种控制更直观。
