本文详解如何通过 flex-shrink 属性实现多列 Flex 布局中子元素的渐进式、有优先级的截断行为——即让指定元素如按钮先收缩至最小宽度之后其他元素才开始截断避免所有项同时被裁剪。 本文详解如何通过 flex-shrink 属性实现多列 flex 布局中子元素的渐进式、有优先级的截断行为——即让指定元素如按钮先收缩至最小宽度之后其他元素才开始截断避免所有项同时被裁剪。在响应式布局中当容器宽度动态缩小时Flex 子元素默认会按比例共同收缩flex-shrink: 1导致文本内容同步被 text-overflow: ellipsis 截断用户体验割裂——例如按钮文字和标签文字同时变“…”。而实际业务常需明确收缩优先级先压缩操作控件如按钮待其达到 min-width 后再压缩主信息区域如标题。这正是 flex-shrink 的核心应用场景。flex-shrink 并非开关式属性而是一个收缩权重比。当多个 flex 项目面临空间不足时浏览器会根据各元素的 flex-shrink 值计算收缩比例。例如元素 Aflex-shrink: 2 元素 Bflex-shrink: 1→ A 的收缩量约为 B 的 2 倍。因此要实现「仅按钮先收缩」的效果只需赋予其远高于其他项的 flex-shrink 值如 9999使其他元素在视觉上几乎不参与初始收缩.container { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px;}.child { border: 1px solid #ccc; height: 40px; display: flex; align-items: center;}.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}/* 关键赋予按钮极高的收缩权重 */.btn { min-width: 30px; flex-shrink: 9999; /* ?? 核心声明强制优先收缩 */}.label { overflow: hidden; /* 保持默认 flex-shrink: 1收缩权重极低 */}div classcontainer div classchild label h3 classtruncateItem label — long descriptive text here/h3 /div div classchild btn truncate Item Button /div div classchild Item Status /div/div? 效果验证路径 RedClaw 百度推出的手机端万能AI Agent助手