flex-basis设为固定值后列表项不等宽，根本原因是默认flex-shrink:1导致空间不足时被压缩；需显式设flex-shrink:0或用flex:0 0 120px，并注意盒模型、文字溢出及兼容性问题。
flex-basis设成固定值后列表项还是不等宽？
常见现象是写了 flex-basis: 120px，但实际渲染时宽度参差不齐，尤其文字长度差异大或有内边距/边框时。根本原因在于 flex-basis 只是“初始主轴尺寸”，后续仍受 flex-shrink（默认为1）影响——容器空间不足时，项目会被压缩。
- 必须显式设置
flex-shrink: 0，否则哪怕flex-basis固定，也会被挤窄 - 若用
flex: 0 0 120px（即flex-grow: 0/flex-shrink: 0/flex-basis: 120px），比单独写flex-basis更稳妥 - 注意盒模型：
width和flex-basis计算逻辑不同，后者包含内容+内边距+边框（box-sizing: border-box 下）
为什么用flex-basis而不是width？
直接设 width: 120px 看似更直白，但在 Flex 容器里会失效或行为异常——当父容器启用了 display: flex，子项的 width 仅作为 flex-basis 的 fallback，且不参与 flex 分配逻辑。真正控制基础尺寸的，是 flex-basis。
-
width在 flex 布局中只是“建议值”，浏览器可能忽略；flex-basis是 flex 算法的正式输入参数 - 响应式场景下，
flex-basis可配合min-width或max-width使用，而单纯width容易被撑破或截断 - IE10–11 对
flex-basis支持不全，若需兼容，得加-ms-flex-preferred-size前缀
文字溢出导致宽度撑开怎么办？
即使 flex-basis 和 flex-shrink: 0 都设了，长文本仍可能让容器变宽——这是默认的 white-space: normal 和自动换行机制在起作用。对齐宽度的前提是内容不突破设定尺寸。
- 加
overflow: hidden+text-overflow: ellipsis+white-space: nowrap组合，强制单行截断 - 若允许换行，用
word-break: break-all或overflow-wrap: break-word控制折行位置 - 避免给
padding或border设过大的值，它们会叠加在flex-basis之上（除非box-sizing: border-box已启用）
多列等宽布局用flex-basis还够用吗？
纯靠 flex-basis 实现 N 列等宽（比如三列各占 33.33%），不如直接用 flex: 1 简洁可靠。固定 flex-basis 更适合“明确像素宽度”的场景，比如图标栏、工具按钮组、表头固定列。
- 要等分容器，优先写
flex: 1（即flex-grow: 1），它会均分剩余空间，不受内容长度干扰 - 混合布局中可混用：
flex: 0 0 80px（固定图标列） +flex: 1（自适应文本列） - Grid 布局现在更推荐用于二维等宽需求，
grid-template-columns: repeat(3, 1fr)比 flex 更直观稳定
flex-basis 的坑不在写法，而在它和 shrink/grow 的耦合关系——漏掉 flex-shrink: 0 是最常被忽略的一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
