父容器需设min-height: 100vh且为flex容器，子元素用margin-top: auto才能真正贴底；该方法仅对直接子项生效，align-self: flex-end无效（因控制交叉轴），且依赖可计算高度。
Flex父容器设flex-direction: column后，子元素怎么真正“贴底”？
不是加个margin-top: auto就完事——它只在flex-direction: column下生效，且依赖父容器有明确高度或能撑开。常见错误是父容器高度塌陷（比如没设height或min-height），导致margin-top: auto完全没反应。
- 父容器必须有可计算的高度：用
min-height: 100vh比height: 100vh更安全（避免内容超长时溢出） - 子元素需是直接子项；如果中间嵌了
div包装层，margin-top: auto会作用在包装层上，而不是你想要的按钮或文字 - 别混用
align-items: flex-end来“右对齐+底对齐”，那是交叉轴控制，和纵向置底无关
为什么align-self: flex-end不能让元素在列布局里沉底？
align-self控制的是**交叉轴**对齐。当flex-direction: column时，主轴是垂直的，交叉轴反而是水平的——所以align-self: flex-end只会让元素靠右，不会下移。
- 真正起效的是
margin-top: auto（推向下）或margin-bottom: auto（推向上），它们沿主轴分配剩余空间 - 若想同时居中+置底切换，别用
justify-content动态改——它会影响所有子项；优先用margin-top: auto单点控制目标元素 - 注意 Safari 旧版本对
margin: auto在 Flex 中的支持不一致，iOS 12以下建议补margin-top: auto+margin-bottom: 0显式声明
响应式场景下，置底逻辑怎么随断点安全切换？
移动设备常需要“内容区占满，按钮固定底部”，桌面则可能希望按钮随内容自然流式排列。这时候不能只靠一套 Flex 规则硬套。
- 用媒体查询隔离逻辑：
@media (max-width: 768px) { .container { min-height: 100vh; } .footer { margin-top: auto; } } - 避免在响应式中反复切换
flex-direction——方向一变，原来margin-top: auto就失效，得同步改成margin-left: auto，极易遗漏 - 如果底部区域要脱离文档流（比如悬浮、吸底），
position: sticky比 Flex 更可控：bottom: 0配合position: -webkit-sticky兼容性更好
Flex置底和position: absolute比，差在哪？
两者都能“到底部”，但机制完全不同：position: absolute脱离布局流，可能遮挡内容、影响可访问性；Flex 的margin-top: auto仍在文档流中，语义清晰，也支持自动避让（比如键盘弹出时 iOS 会重算视口高度）。
- 绝对定位要父容器设
position: relative，而 Flex 置底只需父容器是display: flex，更轻量 - Flex 方案天然支持内容高度变化——哪怕子元素动态增减，底部元素始终贴住末尾；绝对定位得靠 JS 监听 resize 或 DOM 变化来重算位置
- 真要兼容 IE10/11？别用
margin: auto，改用justify-content: flex-end并确保只有一个子元素，或退回到position: absolute+bottom: 0
margin-top: auto只对**直系子元素**有效——中间多一层 wrapper，就得重新检查 DOM 结构。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
