应按需控制 flex 子项收缩：对文字按钮等设 flex-shrink: 0，对内容区保留 flex-shrink: 1，配合 min-width/min-height 设定压缩底线，并慎用 flex: 1，优先用 flex-basis 锚定基准尺寸。
元素被挤压变形，通常是因为 flex-shrink 默认值为 1，导致子项在空间不足时主动收缩，甚至内容被截断或图片失真。关键不是禁用收缩，而是**按需控制哪些元素可缩、缩多少、缩到什么程度**。
明确各子项的收缩意愿
默认所有 flex 子项都能收缩（flex-shrink: 1），但并非所有内容都适合压缩。比如按钮文字、图标、固定尺寸头像就不该被压扁。
- 对内容敏感型元素（如带文字的按钮、表单输入框）设
flex-shrink: 0，禁止压缩 - 对弹性容器型元素（如中间内容区、卡片列表）保留
flex-shrink: 1，让它承担主要收缩责任 - 若需差异化收缩（例如 A 区最多缩 20%，B 区优先缩），可用
flex-shrink: 2和flex-shrink: 1配合比例控制
配合 min-width / min-height 设定压缩底线
仅设 flex-shrink 不够——它只影响“怎么缩”，不定义“缩到哪停”。没有最小限制时，文字可能挤成一团，图片可能塌成一条线。
- 文字类容器加
min-width: max-content或具体值（如min-width: 80px），防止字被压碎 - 图片/图标容器设
min-width: 24px、min-height: 24px，保基本可识别性 - 使用
min-width: 0要谨慎：它会启用内容最小尺寸计算（如长单词、URL），可能意外撑宽容器
慎用 flex: 1 简写，看清背后含义
flex: 1 等价于 flex: 1 1 0，即 flex-shrink: 1 —— 它默认允许压缩。很多“莫名被压扁”就源于盲目用 flex: 1 包裹图文混合区域。
立即学习“前端免费学习笔记（深入）”；
- 想等分宽度且不压缩内容？改用
flex: 0 0 50%（不伸展、不收缩、基础宽度 50%） - 想自适应但有底线？写全
flex: 1 1 auto，再叠加min-width: 120px - 调试时用浏览器开发者工具检查 computed 样式，确认最终生效的
flex-shrink值是否符合预期
用 flex-basis 锚定基准尺寸，减少不确定性
flex-basis 是收缩/拉伸的起点。设为 auto（默认）时，浏览器按内容宽度算基线；设为 0（如 flex: 1）则忽略内容，纯按比例分配——这容易引发意外压缩。
- 文字块优先用
flex: 0 1 fit-content或flex-basis: max-content，让基线贴合文字实际宽度 - 需要均分又防压缩？用
flex: 0 1 200px，即“不放大、可缩小、基线 200px”，再配min-width: 160px - 避免同时设
width和flex-basis冲突，优先以flex-basis为准
