本文详解如何通过 flex-shrink 属性精确控制 Flex 布局中多个可截断子项的收缩优先级，实现“先缩第二项、再缩第一项”的响应式截断逻辑，避免默认均等压缩问题。 本文详解如何通过 `flex-shrink` 属性精确控制 flex 布局中多个可截断子项的收缩优先级，实现“先缩第二项、再缩第一项”的响应式截断逻辑，避免默认均等压缩问题。在 Flex 布局中，当容器宽度不足时，默认所有弹性子项会按比例共同收缩（shrink），这常导致关键信息（如主标签）与次要内容（如操作按钮）被同时截断，影响可读性与用户体验。要实现可控的截断优先级——例如：先压缩中间按钮，待其达到最小宽度后，再开始压缩左侧标签——核心在于显式干预各子项的收缩权重。? 正确解法：利用 flex-shrink 设定收缩优先级flex-shrink 是一个无单位数值，默认为 1，它定义了当空间不足时，该元素相对于其他兄弟元素的收缩比率。关键点在于： 若所有子项 flex-shrink: 1，则等比收缩； 若某子项设为 flex-shrink: 9999，而其余为 1 或 0，则浏览器会优先大幅压缩该高权重项，直至触达其 min-width 或 min-content 约束，之后才轮到其他项收缩。因此，针对原始需求（先截断 .btn，再截断 .label），只需为按钮添加高 flex-shrink 值，并确保标签保留默认或更低收缩倾向： NameGPT名称生成器 免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。