页脚高度不固定时align-items无效，因它需父容器有明确高度；应设min-height:100vh、flex-direction:column，并用margin-top:auto替代align-items实现粘底。
页脚高度不固定时，align-items 为什么没效果？
因为 align-items 只在父容器有明确高度（或被撑开）时才起作用。页脚常被放在 body 或 main 的 Flex 容器里，但若父容器本身高度不足（比如内容少、未占满视口），align-items: flex-end 就会“没地方可对齐”。
实操建议：
- 给 Flex 父容器加
min-height: 100vh（不是height: 100vh，避免内容超长时被截断） - 确保父容器是直接 Flex 容器，且子元素中页脚是最后一个子项
- 避免在页脚上设
margin-top: auto同时又设align-items——二者逻辑冲突，优先用一种方式
用 margin-top: auto 比 align-items 更可靠？
是的，尤其在单列垂直布局中。margin-top: auto 是 Flex 布局里“推走”的经典技巧，它不依赖父容器的 align-items 设置，也不要求父容器有固定高度，只要父容器是 display: flex; flex-direction: column 就能生效。
常见错误现象：
- 页脚卡在内容下方、没到底部：父容器漏了
flex-direction: column - 页脚消失或重叠：页脚元素被设了
flex-shrink: 0但没配flex-basis，导致高度塌缩 - 多栏页脚（如三列链接+版权）错位：子项没设
flex-wrap: wrap或宽度控制不当
页脚内部用 Flex 排列多区块，justify-content 和 gap 怎么选？
gap 更简洁安全，它自动处理间距、不干扰对齐逻辑；而 justify-content 在项数变化时容易失衡（比如从 3 列变 2 列，间距就突变）。
使用场景与参数差异：
- 固定三列结构（如“产品｜文档｜支持”+版权行）：用
display: flex; gap: 1.5rem+flex-wrap: wrap应对小屏 - 左右两端对齐（如左 logo、右 social 图标）：用
justify-content: space-between，但必须确保只有两个直系子项，否则中间会空出不可控间隙 - 兼容性注意：
gap在 Flex 中 IE 完全不支持，如需兼容 IE，改用margin模拟，且为最后一项设margin-right: 0
页脚粘底（sticky footer）和 Flex 冲突怎么办？
所谓“粘底”，本质是让页脚始终在视口底部，但内容少时不悬浮、内容多时不遮挡——这和 Flex 的“撑满容器”逻辑天然一致，根本不需要 JS 或负 margin 等老方案。
关键点：
- 结构必须是：外层
display: flex; flex-direction: column; min-height: 100vh→ 内容区flex: 1→ 页脚无 flex 属性或设flex-shrink: 0 - 别给内容区设
height: 100%，会破坏flex: 1的弹性行为 - 如果用了 CSS Grid 做主体布局，页脚仍可用 Flex，但要注意 Grid 容器不能同时是 Flex 容器——层级要分清
最易被忽略的是：页脚内文字行高、内边距、字体大小这些“视觉高度”没预留，导致看起来没贴底，其实只是内容盒模型撑开了空间。检查时先临时加 outline: 1px solid red 看真实边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
