display: flex 默认不垂直对齐列表项，因 align-items: stretch 对无高度的无效，需显式设 align-items: center 等，并重置默认间距、统一 line-height、避免 vertical-align 干扰。
为什么 display: flex 会让列表项“看起来”没对齐
常见错觉是加了 display: flex 就自动居中对齐，其实它默认只在主轴（flex-direction: row 时是水平方向）上拉伸或排列，交叉轴（垂直方向）完全不管——align-items 默认值是 stretch，但列表项（如 ）本身没有显式高度，导致文字基线不一致、上下留白不同，视觉上就“歪了”。
- 父容器必须设
display: flex，且明确align-items: center（垂直居中）或align-items: flex-start（顶部对齐） -
内若含或，要检查它们是否自带vertical-align（如vertical-align: baseline）造成偏移 - 避免给
设float或display: inline-block，会和flex冲突
用 align-items 和 justify-content 控制对齐方向
对齐分两个维度：主轴（justify-content）决定左右/上下排列，交叉轴（align-items）决定上下/左右居中。列表通常是水平排布，所以主轴是水平方向。
-
justify-content: flex-start→ 左对齐（默认，适合常规导航栏） -
justify-content: center→ 水平居中（注意：整个 -
align-items: center→ 所有文字垂直居中（最常用） -
align-items: stretch→ 拉伸子项高度填满容器（慎用，文字可能被撑开）
常见干扰项：内边距、行高、字体渲染差异
即使 flex 设置正确，仍可能因细节错位。浏览器对 的默认 margin、padding、line-height 处理不一致，尤其混用图标或不同字号时。
- 重置
的默认间距：ul { margin: 0; padding: 0; }，li { margin: 0; padding: 0; } - 统一
line-height（比如设为1.5），比单纯设height更可靠 - 图标用
inline-flex容器包裹，避免img或svg的默认vertical-align: baseline拖低文字
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0.5rem 1rem;
line-height: 1.5;
}
a {
display: inline-flex;
align-items: center;
text-decoration: none;
}
响应式下 flex 列表换行后对齐失效怎么办
加 flex-wrap: wrap 后，多行时 align-items 只作用于单行内部，无法跨行对齐。此时需改用 align-content 控制行与行之间关系。
立即学习“前端免费学习笔记（深入）”；
-
align-content: flex-start→ 所有行贴顶部（默认） -
align-content: center→ 行组整体垂直居中（需父容器有固定高度） - 更稳妥做法：放弃多行 flex，改用
flex-direction: column+ 媒体查询控制单列/多列布局
align-items 真生效了，再查子元素有没有偷偷加 margin 或 line-height。 
