用Flex实现页头页脚布局的关键是：外层设min-height:100vh并flex-column，main用flex:1（非flex-grow:1），页脚高度需从视口高度中扣除以避免溢出。
直接用 Flex 实现页头页脚布局，关键不是“加一堆属性”，而是控制好三个容器的弹性关系：外层撑满视口、中间内容自动伸缩、页头页脚不抢空间。其他写法容易导致页脚悬浮、内容被遮或小屏错位。
body 设为 column flex 容器时必须设 min-height: 100vh
只写 height: 100% 不够——它依赖父元素高度，而 html 和 body 默认没高度。漏掉这步，flex: 1 的主内容就无法伸展，页脚会塌到内容末尾而不是视口底边。
-
html, body { height: 100%; margin: 0; }是基础，但不能替代min-height: 100vh -
.wrapper { min-height: 100vh; display: flex; flex-direction: column; }才是真正起效的最小高度保障 - 如果用了
body直接当 flex 容器，也要给它加min-height: 100vh，否则 Safari 旧版可能失效
main 区域用 flex: 1 而不是 flex-grow: 1
flex: 1 是 flex-grow: 1 + flex-shrink: 1 + flex-basis: 0 的简写，三者缺一不可。只写 flex-grow: 1 会让元素按内容宽度基准伸缩，反而在窄屏下撑破布局。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 错误写法：
main { flex-grow: 1; }→ 小屏时文字换行+高度突增，页脚被顶出视口 - 正确写法：
main { flex: 1; }→ 基准宽度为 0，纯靠 grow 填充剩余空间，行为稳定 - 若 main 内有固定高度组件（如 banner），需额外设
overflow: hidden防止 flex 计算异常
页脚内容溢出时 gap 和 padding 的优先级要理清
页脚里塞了多列链接、版权文字、社交图标后，gap 和 padding 会叠加影响实际高度。尤其在移动端，gap: 1rem + padding: 1rem 可能让页脚高过预期，触发滚动条或遮挡内容。
立即学习“前端免费学习笔记（深入）”；
- 先用
gap控制子项间距（推荐），再用padding控制页脚整体内边距 - 避免在
footer上同时设padding和gap后又加margin，三者叠加易失控 - 小屏下改用
flex-direction: column时，gap仍生效，但justify-content失效，得靠text-align: center对齐文字
最常被忽略的是：页脚高度本身会影响 flex: 1 的可用空间。如果页脚用了 position: fixed 或 height: 60px，必须从 min-height: 100vh 里减去这个值，否则页面总高度会超视口——这不是 Flex 的错，是计算逻辑没闭环。
