Skip to main content

flex-grow 属性

Docs

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

  • CSS 属性 flex-grow 设置 flex 项 主尺寸 的 flex 增长系数。
  • flex-grow 决定了 flex items 如何扩展 (拉伸/成长)
    • 可以设置任意非负数字（正小数、正整数、0），默认值是 0
    • 当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
  • 如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
    • flex container 的剩余 size * flex-grow / sum
  • flex items 扩展后的最终 size 不能超过 max-width\max-height

flex-grow 属性用于控制弹性项在空间分配时的增长比例，可以使弹性项占据剩余空间的比例不同。

flex-grow 属性是一个非负数值，默认为 0。它表示弹性项在剩余空间分配中所占的比例，计算方式是将所有弹性项的 flex-grow 值相加，然后将剩余空间按比例分配给弹性项。

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

.container {
  display: flex;
}

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

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

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

在上述代码中，弹性项 A、B、C 的 flex-grow 分别为 1、2、1，它们将按比例占据剩余空间。

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

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

Details
Details