flex-shrink 弹性收缩属性
最后更新：2026-09-13
flex-shrink flex-shrink 弹性收缩属性
flex-shrink 属性用于设置弹性项目的缩小比例，决定当容器空间不足时，该项目会收缩多少以适应容器。它的默认值为 1，表示项目会按需缩小。值为 0 时项目保持原始尺寸不缩小，即使容器空间不足也不会变形。数值越大的项目在空间不足时收缩得越多。
| 分类 | |
|---|---|
| 初始值 | 1 |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
flex-shrink: <number>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<number> | 类型 | 弹性收缩比例，0 表示不收缩 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-shrink | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| 所有主流浏览器均支持 | |||||
提示： flex-shrink 是无单位的比例值，不接受负值。收缩空间按各项目 flex-shrink 值的比例分配，例如一个项目为 2、另一个为 1，则前者收缩量是后者的两倍。
注意： flex-shrink 只在容器空间不足时才生效。如果项目总宽度未超过容器宽度，flex-shrink 不会产生任何效果，项目保持原始尺寸。
❓ 常见问题
Qflex-shrink: 0 有什么实际用途？
A常用于必须保持固定尺寸的元素，如侧边栏、Logo、图标按钮、分页器等。容器空间不足时这些元素也不会被压缩，保证可读性和可点击区域。典型搭配：内容区 flex-shrink: 1 自适应收缩，侧边栏 flex-shrink: 0 固定不动。
Q为什么设置了 flex-shrink: 0 还是被压缩了？
A可能原因：子项设了 max-width/min-width 与收缩设置冲突、父容器 overflow: hidden 裁剪而非收缩、或 flex-basis 为 auto 且子项是长文本可换行。检查子项完整的尺寸声明与父容器溢出设置，flex-shrink: 0 要写在具体元素上。
Qflex-shrink: 1 和 flex-shrink: 0 混用会怎样？
A空间不足时 flex-shrink 值越大的子项收缩越多。混用时 flex-shrink: 1 的子项按比例收缩，flex-shrink: 0 的子项保持原尺寸，结果是可收缩项被压缩得更窄，内容可能溢出或换行。这正是常见布局技巧：让侧边栏 flex-shrink: 0 固定、内容区 flex-shrink: 1 收缩。
🏷️ 相关属性
💡 相关案例
📚 相关教程
