flex-grow 是 CSS 中用于设置弹性项目（Flex Items）放大比例的属性。它决定了弹性项目在弹性容器中分配的剩余空间。

基本语法如下：
.flex-item {
  flex-grow: value;
}

其中 value 是一个正整数，表示弹性项目的放大比例。默认值为 0，表示项目不会放大。

以下是一些例子：

1. 所有项目放大比例相同：
    .flex-item {
      flex-grow: 1;
    }

    在这个例子中，所有弹性项目将平均分配弹性容器中的剩余空间。

2. 某个项目放大比例为 2，其他为 1：
    .flex-item {
      flex-grow: 1;
    }

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

    在这个例子中，.flex-item-large 会相对于其他项目获得更多的剩余空间，其放大比例是其他项目的两倍。

flex-grow 属性通常与 flex-shrink 和 flex-basis 一起使用，形成 flex 缩写属性，以完整地定义弹性项目在弹性容器中的行为。例如：
.flex-item {
  flex: 1 1 auto;
}

这表示项目在弹性容器中既可以放大也可以缩小，且初始大小由内容决定。


转载请注明出处：http://www.zyzy.cn/article/detail/4184/CSS