DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费信贷!
flex-shrink
属性是 弹性盒布局模块 的子属性。
它指定“弹性收缩系数”,该系数决定当行没有足够空间时,弹性项目相对于弹性容器中其他弹性项目的收缩程度。
.element {
flex-shrink: 2;
}
省略时,它被设置为 1
,弹性收缩系数在分配负空间时乘以弹性基准。
语法
flex-shrink: <number>
演示
要查看此演示的全部潜力,您需要能够调整其宽度,因此请直接在 CodePen 上查看它。
在此演示中
- 第一个项目具有
flex: 1 1 20em
(flex-grow: 1
、flex-shrink: 1
和flex-basis: 20em
的简写形式) - 第二个项目具有
flex: 2 2 20em
(flex-grow: 2
、flex-shrink: 2
和flex-basis: 20em
的简写形式)
这两个弹性项目都希望 20em 宽。由于弹性增长(第一个参数),如果弹性容器大于 40em,第二个子项将占用比第一个子项多两倍的剩余空间。但如果父元素的宽度小于 40em,那么第二个子项的宽度将比第一个子项少两倍,使其看起来更小(因为第二个参数,弹性收缩)。
浏览器支持
- (modern) 表示规范中的最新语法(例如
display: flex;
) - (hybrid) 表示 2011 年的奇特非官方语法(例如
display: flexbox;
) - (old) 表示 2009 年的旧语法(例如
display: box;
)
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10+ | 所有 | 20+ | 22+ | 8+ | 12.1+ |
iOS | Chrome Android | Firefox Android | Android | Opera Mobile |
---|---|---|---|---|
8+ | 所有 | 所有 | 92+ | 12.1+ |
Blackberry 浏览器 10+ 支持新语法。
有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 “使用弹性盒布局” 或 DevOpera 中的这篇文章。
我读过 spc。但我没有演示就无法理解它,所以我来到这里。但是,我不知道为什么演示有这种效果。它是如何计算的?:(
这在 Ipad Safari v8.1.3 上不起作用。虽然它说应该是兼容的。
这在 Ipad Safari v8.1.3 上不起作用,虽然它应该是兼容的。
Safari 5.1.7 不起作用