在css弹性布局中，当弹性容器的宽度不足以容纳所有子元素的基础宽度之和时，子元素会根据规则进行收缩，flex-shrink属性就是用来定义子元素收缩比例的核心属性，它决定了在空间不足时每个子元素收缩的权重。
flex-shrink的基本语法
flex-shrink是弹性子项的属性，取值为非负数字，默认值为1，语法格式如下：
/* 单个子元素设置 */
.item {
flex-shrink: <number>; /* 默认值为1 */
}
当取值为0时，表示元素不会收缩；取值越大，元素收缩的幅度就越大。
flex-shrink的收缩计算规则
flex-shrink的收缩并不是简单的按比例分配，而是需要结合元素的基础宽度（flex-basis，默认是元素自身宽度）来计算加权比例，具体步骤如下：
- 第一步：计算所有子元素的收缩权重总和，即每个子元素的flex-shrink值乘以自身flex-basis的总和
- 第二步：计算每个子元素的收缩占比，即（自身flex-shrink值 * 自身flex-basis） / 收缩权重总和
- 第三步：计算每个子元素的实际收缩量，即（容器溢出宽度） * 收缩占比
- 第四步：计算子元素最终宽度，即自身flex-basis - 实际收缩量
代码示例演示
下面通过一个具体的例子来演示不同flex-shrink取值的效果，容器宽度为500px，内部有三个子元素，基础宽度都是200px，总溢出宽度为100px：
<div class="container">
<div class="item item1">元素1</div>
<div class="item item2">元素2</div>
<div class="item item3">元素3</div>
</div>
对应的css样式如下：
.container {
display: flex;
width: 500px;
border: 1px solid #ccc;
}
.item {
flex-basis: 200px; /* 基础宽度200px */
height: 100px;
text-align: center;
line-height: 100px;
}
.item1 {
background: #f00;
flex-shrink: 1; /* 默认收缩比例1 */
}
.item2 {
background: #0f0;
flex-shrink: 2; /* 收缩比例2 */
}
.item3 {
background: #00f;
flex-shrink: 0; /* 不收缩 */
}
按照计算规则：
- 收缩权重总和 = 1*200 + 2*200 + 0*200 = 600
- 元素1收缩占比 = (1*200)/600 = 1/3，实际收缩量 = 100 * 1/3 ≈ 33.33px，最终宽度 ≈ 166.67px
- 元素2收缩占比 = (2*200)/600 = 2/3，实际收缩量 = 100 * 2/3 ≈ 66.67px，最终宽度 ≈ 133.33px
- 元素3收缩占比为0，实际收缩量0，最终宽度保持200px
注意事项
使用flex-shrink时需要注意以下几点：
- 如果容器空间充足，没有溢出，flex-shrink不会生效
- 当flex-shrink取值为负数时，属性无效，会被当作默认值1处理
- 如果子元素设置了width或者flex-basis为固定值，且flex-shrink不为0，在空间不足时仍然会收缩，除非同时设置flex-shrink:0
- flex是flex-grow、flex-shrink、flex-basis的简写属性，flex: 1 1 0% 就表示flex-shrink为1，会参与收缩计算
实际开发中，如果需要某个元素在空间不足时保持自身宽度不收缩，直接设置flex-shrink:0即可，这是最常见的使用场景。
cssflex-shrinkflex布局弹性收缩修改时间：2026-07-07 03:54:20