flex: 1 在含文字列表中无法等宽，因 flex-basis: 0 + flex-shrink: 1 导致长文本撑开后压缩失衡；可靠方案是 flex: 0 0 calc(100%/n) 配合 min-width: 0 和 white-space 控制换行或截断。
flex: 1 在列表项中为什么没让它们等宽
因为 flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0 的简写，关键在 flex-basis: 0 —— 它会让所有子项从“0宽度”开始均分剩余空间，表面看是等宽，但一旦内容长度差异大（比如一个项是“首页”，另一个是“用户中心管理后台配置项”），文字撑开容器后，flex-shrink: 1 又允许压缩，实际宽度就失衡了。
- 只对纯色块或图标类列表安全；含文字的列表需显式控制收缩行为
- 如果父容器
display: flex但未设width或max-width，子项可能溢出视口 - 移动端小屏下，
flex: 1+ 长文本 = 水平滚动，不是换行
真正可靠的等宽响应式列表写法
用 flex: 0 0 calc(100% / 3) 显式定义基础宽度，再配合 min-width: 0 防文字撑破，并在断点处改列数。不依赖 flex-grow 均分逻辑，而是靠计算式锁定比例。
-
flex: 0 0 calc(100% / 3)表示：不放大、不缩小、基准宽为三分之一 - 必须加
min-width: 0，否则 Flex 子项默认min-width: auto，会阻止收缩 - 响应式只需改
calc()中的除数：桌面端calc(100% / 4)，平板calc(100% / 2)，手机calc(100% / 1) - 避免用
vw替代%，它无视父容器 padding，容易错位
遇到文字换行/截断要怎么处理
等宽容器里文字不自动折行，是因为 Flex 子项默认 white-space: nowrap。不处理就会溢出或撑破布局。
- 强制折行：
white-space: normal; word-break: break-word; - 单行截断：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但需加width: 100%或max-width: 100% - 别只写
overflow: hidden，没white-space配合，截断无效 - 使用
line-clamp要注意兼容性：firefox 需-webkit-line-clamp+display: -webkit-box
IE11 下 flex: 0 0 calc() 失效怎么办
IE11 不支持 calc() 在 flex-basis 里，直接当无效值丢弃，退化成 auto，列表就不再等宽。
立即学习“前端免费学习笔记（深入）”；
- 方案一：用媒体查询 + 固定像素宽度（如
flex: 0 0 200px），适合列数固定且容器宽度可控的场景 - 方案二：改用
display: table模拟等宽，table-layout: fixed+width: 100%，兼容性好但语义弱 - 方案三：放弃 IE11，用
@supports (flex-basis: 0)包裹现代写法，给 IE 单独写回退样式 - 千万别用
flex: 1+max-width组合骗 IE，它会忽略max-width对 Flex 子项的限制
最麻烦的其实是内容动态加载后重排——flex 容器没设高度时，列表项高度不一致会导致视觉错位，这时候得加 align-items: stretch 或统一设 min-height。