CSS | flex-grow 属性

在 Flexbox 布局中，使用 flex-grow 属性来分配可用空间给 Flex 容器中的项目。flex-grow 属性定义了一个项目在分配可用空间时应该占用剩余空间的比例。

用法

flex-grow: <number>

<number> 参数指定了项目的增长因子，可以是任意非负整数，默认值为 0。当一个 Flex 容器中的项目有 flex-grow 属性时，剩余空间将被分配给那些有更高增长因子的项目。

例子

以下是简单的例子，使用 flex-grow 属性来实现两个项目的宽度自适应，其中一个的宽度比另一个大。

<div class="container">
  <div class="item item-1">项目 1</div>
  <div class="item item-2">项目 2</div>
</div>

.container {
  display: flex;
}

.item {
  height: 50px;
  margin: 10px;
  color: #fff;
  font-size: 24px;
}

.item-1 {
  background-color: #f44336;
  flex-grow: 1;
}

.item-2 {
  background-color: #2196f3;
  flex-grow: 2;
}

以上代码中，.container 元素为 Flex 容器，.item-1 和 .item-2 元素为 Flex 项目。.item-1 元素的 flex-grow 属性值为 1，.item-2 元素的 flex-grow 属性值为 2。这意味着，.item-2 元素将被分配比 .item-1 元素更多的可用空间，使其宽度更大。

兼容性

flex-grow 属性的兼容性良好，支持大多数现代浏览器。

总结

flex-grow 属性可用于 Flexbox 布局中的项目，用于分配可用空间。该属性的值表示项目在剩余空间中应占用的比例。如果您需要在 Flex 容器中自适应调整项目的大小，请尝试使用 flex-grow 属性。