Flex子项不均匀分布需设flex:1并清除ul默认样式；导航栏文字偏移因a标签未设block或line-height不匹配；响应式失效须在媒体查询中重设flex属性。
flex布局下子项不均匀分布？检查justify-content和flex属性组合
直接给 <ul> 设 display: flex 后，<li> 没有等宽或没撑满，大概率是漏了关键控制项。Flex 容器默认不拉伸子项，justify-content: space-between 只管间距分配，不管宽度；而 justify-content: center 只居中整体块，不均分空间。
要真正“均匀分布”，得让每个 <li> 占据相等份额：
- 给
<ul>加display: flex和justify-content: space-around（两端留空）或space-evenly（严格等距） - 更稳妥的做法是给每个
<li>加flex: 1，再配合text-align: center确保文字居中 - 如果希望固定数量项（比如5个）平均占满容器，用
flex: 1比width: 20%更可靠——后者在 padding/border 下容易溢出 - 注意：若
<li>内是<a>，必须设display: block或inline-block，否则flex: 1对内联元素无效
导航栏文字垂直偏移、看着“没居中”？对齐冲突优先级要理清
align-items: center 在 Flex 容器上生效，但前提是子元素能被当作“块级单元”参与对齐。常见错误是只给 <ul> 设了 align-items: center，却忘了 <li> 默认是 display: list-item，而里面的 <a> 是内联元素——它自带基线对齐（baseline），和 line-height 共同作用时，视觉上就会浮高或下沉。
解决路径很明确：
立即学习“前端免费学习笔记（深入）”；
- 把
<a>设为display: block或inline-block - 重置
<a>的line-height: 1或与容器高度一致（比如line-height: 48px） - 确保父级 Flex 容器（如
<nav>或<ul>）有明确高度，例如height: 60px；否则align-items: center缺少参照基准 - 避免同时给
<a>加padding-top和padding-bottom不等值，这会直接破坏垂直居中效果
ul列表默认样式怎么彻底清除？list-style和margin/padding缺一不可
浏览器对 <ul> 有默认 margin-top/margin-bottom 和 padding-left，还会渲染圆点（list-style: disc）。这些都会干扰 Flex 布局的尺寸计算和视觉对齐，尤其在设了 flex: 1 后，残留 padding 会导致内容区域变窄、文字贴边。
标准清理写法（必须一起用）：
ul { list-style: none; margin: 0; padding: 0; }- 如果
<ul>是<nav>直接子元素，还要确认<nav>自身没有默认 margin（部分浏览器会给<nav>加上下边距） - 别只清
padding-left——padding是简写，漏掉任意方向都可能留白 - 移动端要注意：iOS Safari 有时会保留微小的
margin-block-start，加margin-block: 0更保险
响应式下均匀分布失效？媒体查询里flex属性不能继承
在桌面端设好 flex: 1 和 justify-content: space-evenly 后，切到手机屏幕发现菜单挤成一团或换行错乱，不是 Flex 失效，而是你没在媒体查询里重新声明 flex 行为。
Flex 属性不会自动“降级”或“适配”，必须显式覆盖：
- 小屏下通常改用
flex-direction: column，此时justify-content控制的是垂直方向，align-items: stretch才能让项撑满宽度 - 如果保留横排，但项数变少（比如从7个减到3个），
flex: 1仍有效，但需检查容器宽度是否被父级限制死（比如 max-width 导致实际可用空间不足） - 慎用
flex-wrap: wrap配合flex: 1—— 一旦换行，flex: 1会在每行内重新分配，导致每行首尾项宽度异常 - 真要响应式均匀分布，建议用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))替代 Flex，更可控
<a> 的 display 类型和 line-height 与容器 height 的匹配关系——这两处出错，哪怕其他都写对，文字也一定偏移。 
