底部固定栏不能只靠justify-content: flex-end，因它仅将子元素推至父容器主轴末尾，若父容器高度不足视口，则无法实现视口底部固定；需结合min-height: 100vh、flex-direction: column及margin-top: auto才能可靠实现。
底部固定栏为什么不能只靠 justify-content: flex-end
单纯用 justify-content: flex-end 只能将子元素推到容器主轴末尾，如果容器高度没撑满视口，它就只是“在父容器底部”，而不是“固定在页面底部”。常见错误是父容器（比如 body 或 html）高度不足，导致栏位随内容浮动，一滚动就消失。
真正实现“视觉上固定在视口底部”，需要两个条件：容器高度占满视口 + 子元素被强制压到底部边缘。这时候 align-items 本身不直接起作用（它是交叉轴对齐），关键其实是设置 flex-direction: column 后，让 justify-content 在垂直方向生效。
- 必须给父容器设
min-height: 100vh（不是height: 100vh，否则内容超长时会被截断） - 父容器需声明
display: flex和flex-direction: column - 底部栏作为最后一个子元素，用
margin-top: auto比justify-content: flex-end更可靠——它会自动吃掉上方剩余空间，把栏位“顶”到底部
margin-top: auto 比 justify-content: flex-end 更适合底部固定
当容器是 flex-direction: column 时，justify-content 控制的是垂直方向的分布，但它的行为依赖所有子元素的总高度。如果内容区域高度不确定或为 0，justify-content: flex-end 可能把底部栏直接贴到顶部下方，而非视口底边。
而 margin-top: auto 是 flex 项自身的属性，它会让该元素和前一个兄弟元素之间产生无限弹性间距，天然把栏位“挤”到最底部，且不受其他子项高度影响。
立即学习“前端免费学习笔记（深入）”；
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main { flex: 1; } / 占满剩余空间，避免内容塌缩 /
.footer { margin-top: auto; }
为什么 align-items 在这里基本用不上
align-items 控制的是交叉轴（即水平方向）的对齐方式，比如居中、左对齐、右对齐。它不影响上下位置，所以对“固定在底部”这件事没有贡献。如果你发现底部栏左右没对齐，才需要它：
- 想让栏内文字/按钮水平居中 → 给
.footer加align-items: center（前提是.footer自身也是display: flex） - 想让整个
.footer在容器中水平居中 → 给父容器加align-items: center（此时父容器需是flex-direction: column，交叉轴才是水平方向） - 如果
.footer是普通块级元素，水平对齐要用text-align或margin: 0 auto
移动端适配和常见塌陷问题
在 iOS Safari 或某些 Android 浏览器里，100vh 会把地址栏高度也算进去，导致底部栏被顶出视口。这时不能硬写死 height: 100vh，得用 JS 动态修正，或者改用 100dvh（2023 年后较新版本支持）：
- 优先尝试
min-height: 100dvh（dynamic viewport height），它会随地址栏展开/收起实时更新 - 不支持
dvh的老环境，用 JS 设置：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，然后 CSS 中用min-height: calc(var(--vh, 1vh) * 100) - 确保
body和html没有margin或padding，否则会撑开容器造成滚动条或错位
最易忽略的一点：底部栏如果设置了 position: fixed，就和 flex 布局无关了——那是另一套逻辑，混用反而容易冲突。flex 实现的“底部固定”本质是布局流内的自然定位，不是脱离文档流的覆盖。
