要防止 flex 布局中元素被压缩，应精准设置 flex-shrink: 0（或 flex: 0 0 auto）于关键元素，并配合 white-space、overflow 等属性确保内容不溢出或换行。
在 H5 页面中使用 Flex 布局时，flex-shrink 默认值为 1，意味着当容器空间不足时，子元素会按比例主动收缩——这常导致文字截断、图标变形或布局错乱。要防止元素被压缩，关键不是“禁用收缩”，而是**精准控制哪些元素不允许收缩**。
理解 flex-shrink 的作用机制
flex-shrink 决定的是“空间不足时，该元素愿意让出多少‘弹性空间’”。它不是开关式属性，而是一个缩放权重系数（默认 1）。数值越大，被压缩得越狠；设为 0，则完全不参与收缩计算。
注意：flex-shrink: 0 仅阻止收缩，不保证内容不溢出——若内容本身宽于剩余空间，仍可能撑破容器或触发换行/隐藏，需配合 white-space、overflow 等协同处理。
给关键元素设置 flex-shrink: 0
适用于图标、按钮、固定宽度组件、短文本标签等不容压缩的元素：
- 直接写内联样式：
style="flex-shrink: 0;" - 或定义 CSS 类：
.no-shrink { flex-shrink: 0; }，再应用到对应元素 - 常见组合写法（推荐）：
flex: 0 0 auto;—— 等价于flex-grow: 0; flex-shrink: 0; flex-basis: auto;，语义清晰且不易被覆盖
避免父容器误设 flex-shrink 影响子项
有时压缩现象并非来自子元素自身，而是其父级（尤其是嵌套 Flex 容器）设置了 flex-shrink: 1 且空间紧张，导致整个子容器被压窄，进而挤压内部内容：
- 检查父级是否意外成为 Flex 项目（例如上级也是
display: flex的子项） - 对不希望被压缩的父容器，同样加
flex-shrink: 0或flex: 0 0 auto - 用浏览器开发者工具的“Flexbox 面板”查看各节点的收缩权重和剩余空间分配，快速定位源头
配合其他属性确保视觉稳定
单设 flex-shrink: 0 不足以解决所有场景，尤其涉及文字或响应式内容时：
- 防文字换行：加
white-space: nowrap; - 防文字溢出容器：加
overflow: hidden;+text-overflow: ellipsis;（需同时设width或max-width） - 图标/头像类元素：建议明确
width和height，并设flex-shrink: 0，避免被拉伸或挤压 - 在移动端，注意
viewport设置是否合理，避免因缩放或宽度计算偏差引发意外压缩
