flex垂直居中失效的根本原因是父容器缺乏可计算高度，align-items依赖父容器高度上下文；解决需设min-height:100dvh或js注入--vh变量，并清除body默认margin。
flex-direction 和 align-items 配合失效，是因为父容器没高度
移动端写 display: flex + align-items: center 垂直居中却贴顶，大概率不是代码错，是父容器实际高度为 0。Flex 的交叉轴对齐（垂直方向）必须依赖父容器有可计算的高度上下文。
常见错误现象：
- 加了
align-items: center，但多行文本还是顶着上边沿 - 给父元素设了
height: 100vh，Safari 地址栏收起/展开时内容跳动 - 临时加
border查看，发现父容器根本没占位
实操建议：
- 优先用
min-height: 100dvh—— Chrome 105+ / Safari 16.4+ 支持，始终反映当前可视区高度 - 兼容老浏览器？用 JS 注入变量：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，再在 CSS 中写min-height: calc(var(--vh, 1vh) * 100) - 务必清除
body { margin: 0 }，默认外边距会干扰高度判断 - 极短文本（如两三个字）+
max-width时，子元素要额外加text-align: center才能水平居中
justify-content: space-between 在移动端最后一行不对齐
用 flex-wrap: wrap + justify-content: space-between 做卡片列表，最后一行只有 1–2 个子项时，它们会被强行撑开、间距异常——这不是 bug，是 space-between 的设计逻辑：它只管“所有行内项目”，不区分是否满行。
实操建议：
- 改用
margin-right: auto控制单个元素位置更可控：比如导航栏左 logo、中标题、右按钮，分别加.logo { margin-right: auto }和.action { margin-left: auto } - 若坚持用
space-between，需配合gap+ 固定列数控制，例如每行最多 3 个，最后一行不足就补空 div 或用伪元素占位 - 避免在 flex 容器里混用
text-align: center想“模拟”水平居中——它对 flex 子项无效
多个子块整体垂直居中，但内部文字要左对齐
一个 div 包含 h2 和 p，想让它们作为一个整体在父容器里垂直居中，又不让文字自身居中，直接写 justify-content: center 会导致文字也水平居中，这是主轴和交叉轴方向没理清。
实操建议：
- 设
flex-direction: column，此时justify-content: center控制的是子元素在纵轴上的分布位置（即整体垂直居中） - 再加
align-items: flex-start，让每个子元素（h2、p）自身左对齐，而不是继承父级的居中行为 - 别给子元素再设
vertical-align—— Flex 项完全忽略这个属性 - 如果子元素是多个
span或button，不要靠text-align“凑效果”，那是水平对齐属性，对垂直无影响
图标+文字组合在小屏上错位，关键是 flex-shrink 被误压
移动端一行图标按钮，文字多的那个被压缩变形、换行、图标拉伸——根本原因是 flex-shrink 默认为 1，所有子项在空间不足时按比例让出宽度，而图标类固定尺寸项本不该缩。
实操建议：
- 对图标、头像、徽标等固定尺寸项，显式设
flex-shrink: 0，禁止压缩 - 搭配
min-width: 44px（满足最小点击区域），比单靠flex-shrink: 0更稳 - 搜索栏场景：输入框用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），右侧按钮加flex-shrink: 0 - 慎用
* { flex-shrink: 0 }全局重置，会破坏正常流式行为 -
flex-shrink数值不是权重，而是“压缩难易度”的倒数：设成 2 的项，比设成 1 的更容易被压，且压缩量接近两倍
真正卡住人的从来不是属性名记不住，而是忘了 Flex 对齐永远需要“凭据”：父容器得有高度，子项得有尺寸约束，主轴和交叉轴得先分清。这些条件缺一，justify-content 和 align-items 就只是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
