要实现子元素等宽自适应，必须确保父容器设 display: flex（推荐加 flex-direction: row），禁用 float/absolute/inline-block，设置可计算宽度，子元素加 min-width: 0 和 box-sizing: border-box，并推荐使用 flex: 1 1 0 而非 flex: 1。
直接给所有子元素设 flex: 1 就能等宽自适应，但必须确保父容器是真正的 Flex 上下文，否则它只是个无效声明。
父容器没加 display: flex，flex: 1 完全不生效
这是最常被忽略的前提。Flex 属性只在 Flex 容器内起作用，光写子元素的 flex: 1 没用。
- 必须显式设置父容器：
display: flex（推荐同时写flex-direction: row，部分旧 WebView 会忽略默认值） - 避免破坏 Flex 上下文：不要对父容器或子元素用
float、position: absolute或display: inline-block - 父容器得有可计算宽度：比如
width: 100%、max-width: 1200px或width: 100vw；否则 Flex 引擎算不出“剩余空间”，flex: 1就分不到任何东西
flex: 1 下文字或长链接导致横向溢出？缺 min-width: 0
子元素默认 min-width: auto，即最小宽度不低于内容自身宽度。遇到未换行文本、长 URL 或嵌套 Flex 容器时，它宁可横向滚动也不收缩。
- 必须加
min-width: 0才允许真正压缩到零宽度 - 必须加
box-sizing: border-box，否则 padding/border 会被额外计入分配宽度（Safari 14–15 尤其敏感） - 防文字撑开：对含文本的子项加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
要等宽但又不想被内容拉宽？用 flex: 1 1 0 替代 flex: 1
flex: 1 是 flex: 1 1 0% 的缩写，默认 flex-basis 是 0%，这没问题；但某些浏览器（尤其是 Safari）对 0% 解析不稳定，建议显式写 0。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
flex: 1 1 0（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 如果子元素本身有固定内容（如图标+文字），且你希望它严格等分、不被内容尺寸干扰，这个写法比
flex: 1更可靠 - 别混用
width和flex：一旦写了flex，width就基本被忽略
真正卡住的往往不是 flex 属性本身，而是父容器是否干净、子项是否允许压缩、以及浏览器对 flex-basis: 0% 的兼容性处理——这三个点漏掉任何一个，等宽自适应都会失效。
