Skip to main content

flex-shrink 属性

Docs

flex-shrink - CSS：层叠样式表 | MDN (mozilla.org)

  • flex-shrink 决定了 flex items 如何收缩 (缩小)

    • 可以设置任意非负数字（正小数、正整数、0），默认值是 1
    • 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效

  • 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size 为

    • flex items 超出 flex container 的 size * 收缩比例 / 所有 flex items 的收缩比例之和

  • flex items 收缩后的最终 size 不能小于 min-width\min-height

flex-shrink 属性用于控制弹性项在空间不足时的收缩比例，可以使弹性项占据空间的比例不同。

flex-shrink 属性是一个非负数值，默认为 1。它表示弹性项在空间不足时的收缩比例，计算方式是将所有弹性项的 flex-shrink 值相加，然后将不足的空间按比例收缩弹性项。

例如，如果有三个弹性项 A、B、C，它们的 flex-shrink 分别为 1、2、1，则 B 占据不足空间的比例为 2/(1+2+1)=0.4，A 和 C 的比例均为 0.3。

.container {
  display: flex;
}

.item-a {
  flex-shrink: 1;
}

.item-b {
  flex-shrink: 2;
}

.item-c {
  flex-shrink: 1;
}

在上述代码中，弹性项 A、B、C 的 flex-shrink 分别为 1、2、1，它们将按比例收缩以适应空间不足的情况。

需要注意的是，如果所有弹性项的 flex-shrink 值都为 0，它们将不会收缩，即它们的宽度将是它们的最小宽度（如果设置了 min-width 属性）或者内容宽度。此时，弹性容器的 justify-content 属性对弹性项的对齐方式不会产生影响，因为弹性项没有收缩的可能。

另外，如果弹性项的 flex-basis 属性为 0，它们的宽度将由 flex-shrink 属性决定，即按比例收缩以适应空间不足。如果 flex-basis 属性不为 0，则 flex-shrink 属性仅在空间不足以满足 flex-basis 属性时才起作用。

Details