flex子元素被挤压是因flex-shrink:1默认生效且缺最小尺寸约束；应设min-width/min-inline-size或合理配置flex-basis，慎用flex-shrink:0以防溢出。

Flex子元素被挤压的典型表现

窗口变窄时，flex子元素突然换行、文字截断、图标错位，甚至宽度塌缩为0——这不是bug，而是flex-shrink: 1默认生效 + 缺少最小尺寸约束导致的预期行为。

必须设置min-width或min-inline-size

Flex容器不会自动保护子元素内容不被压缩；浏览器会优先满足容器总宽约束，把子项往死里缩，直到min-width拦住它。

• 对文字类子项（如<div class="title">），设<code>min-width: fit-content或具体值（如min-width: 120px）
• 对图标+文字组合，建议包裹一层display: flex容器，并给该容器设min-inline-size: max-content
• 避免只依赖white-space: nowrap：它只防换行，不防缩容，flex-shrink仍可把它压扁

flex-shrink: 0不是万能解，慎用

设flex-shrink: 0确实能阻止收缩，但副作用明显：当父容器太窄时，子项会溢出（overflow: visible默认），且可能触发横向滚动条或遮挡其他元素。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 仅适用于“绝对不可压缩”的关键控件，如操作按钮、固定宽度图标
• 若多个子项都设flex-shrink: 0，又没配flex-wrap: wrap，整行会强行撑宽容器
• 更稳妥的组合是：flex-shrink: 1; min-width: 0; → 允许收缩但有底线；或flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; → 压缩时优雅截断

检查flex-basis是否隐式设成了auto

当没显式写flex-basis时，浏览器按flex-basis: auto处理，即取子元素内容自然宽——这在响应式场景下极不稳定，尤其遇到中英文混排、动态文本时。

• 推荐显式声明：flex: 0 1 200px（等价于flex-grow: 0; flex-shrink: 1; flex-basis: 200px）
• 若需弹性分配剩余空间，用flex: 1 1 200px，比单纯flex: 1更可控
• 注意：flex-basis: 0 + flex-grow: 1会忽略内容宽度，强制均分，容易造成文字挤成一团，慎用于含文本的项

真正卡住的问题往往不在flex本身，而在没给内容一个“不容再小”的物理边界。盯住min-width和flex-basis两个点，比反复调flex-shrink更治本。