flex: 1 在 li 上无效是因为 ul 未设 display: flex；必须先让 ul 成为 Flex 容器，再对 li 使用 flex: 1（即 flex-basis: 0）才能实现等宽分配。
flex: 1 在 ul > li 上不起作用？先检查父容器是否启用了 Flex 布局
直接给 li 设 flex: 1 是无效的，因为 flex 属性只在 flex 容器的**直系子元素**上生效。如果 ul 没有设 display: flex，那所有 li 都还是普通块级元素，flex: 1 会被浏览器完全忽略。
常见错误现象：li 宽度没变化、文字挤在一起、甚至整个列表塌陷。
-
ul必须显式设置display: flex - 推荐同时加
flex-wrap: nowrap（防止小屏下换行破坏等宽） - 如果
ul有默认 padding（比如浏览器内置样式），会干扰宽度计算，建议重置：padding-inline-start: 0
为什么用 flex: 1 而不是 flex: 1 1 0？
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写。关键在 flex-basis: 0 —— 它让所有 li 忽略自身内容宽度，从零开始按比例分配剩余空间，才能真正“平均”。如果用 flex: 1 1 auto 或漏掉 flex-basis，内容长的 li 会先占更多基础宽度，再伸缩，结果就不均等。
- 想严格等宽 → 用
flex: 1（即flex-basis: 0） - 想保留文字最小宽度、再弹性拉伸 → 改用
flex: 1 1 auto，但不满足“平均分配”需求 - 若列表项含图片或固定宽元素，
flex-basis: 0可能导致压缩失真，需额外设min-width: 0防止溢出
响应式下等宽失效？注意 flex 容器宽度是否受限制
即使 ul 是 display: flex 且 li 设了 flex: 1，如果父容器（比如 nav 或 div）宽度不足，或者被 max-width 卡死，li 依然会被压扁或换行。特别是移动端，ul 常被包裹在 width: 100% 但未设 box-sizing: border-box 的容器里，内边距会吃掉可用空间。
立即学习“前端免费学习笔记（深入）”；
- 检查
ul计算后的 width 是否为预期值（用浏览器开发者工具看 computed 样式） - 给
ul加width: 100%和box-sizing: border-box更稳妥 - 避免在
li上设margin或padding，它们会叠加进 flex 分配逻辑；如需间隔，改用gap（现代浏览器支持）或伪元素
IE11 兼容时 flex: 1 行为异常怎么办
IE11 对 flex: 1 的解析有 bug：当 flex-basis 为 0 时，可能把所有 li 渲染成 0 宽。这不是写法错，是引擎缺陷。
- 兼容方案：改用
flex: 1 1 0.000000001px（极小非零值绕过 bug） - 或放弃
flex: 1，退到display: table+table-layout: fixed，但语义和可维护性下降 - 若项目已放弃 IE11，可放心用
flex: 1，无需降级
真正麻烦的是那些没显式声明 display: flex 却以为 flex: 1 自动生效的情况——这属于对 CSS Flexbox 机制的根本误读，比兼容性问题更常导致调试卡壳。
