flex-shrink

Avatar of
on

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费信贷!

flex-shrink 属性是 弹性盒布局模块 的子属性。

它指定“弹性收缩系数”,该系数决定当行没有足够空间时,弹性项目相对于弹性容器中其他弹性项目的收缩程度。

.element {
  flex-shrink: 2;
}

省略时,它被设置为 1,弹性收缩系数在分配负空间时乘以弹性基准。

语法

flex-shrink: <number>

演示

要查看此演示的全部潜力,您需要能够调整其宽度,因此请直接在 CodePen 上查看它。

在此演示中

  • 第一个项目具有 flex: 1 1 20emflex-grow: 1flex-shrink: 1flex-basis: 20em 的简写形式)
  • 第二个项目具有 flex: 2 2 20emflex-grow: 2flex-shrink: 2flex-basis: 20em 的简写形式)

这两个弹性项目都希望 20em 宽。由于弹性增长(第一个参数),如果弹性容器大于 40em,第二个子项将占用比第一个子项多两倍的剩余空间。但如果父元素的宽度小于 40em,那么第二个子项的宽度将比第一个子项少两倍,使其看起来更小(因为第二个参数,弹性收缩)。

浏览器支持

  • (modern) 表示规范中的最新语法(例如 display: flex;
  • (hybrid) 表示 2011 年的奇特非官方语法(例如 display: flexbox;
  • (old) 表示 2009 年的旧语法(例如 display: box;
IEEdgeFirefoxChromeSafariOpera
10+所有20+22+8+12.1+
iOSChrome AndroidFirefox AndroidAndroidOpera Mobile
8+所有所有92+12.1+
来源:caniuse

Blackberry 浏览器 10+ 支持新语法。

有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 “使用弹性盒布局”DevOpera 中的这篇文章

更多信息