CSS | flex-grow 属性

简介

CSS flex-grow 属性是用于设置 Flex 布局中 Flexible Item 所占据剩余空间的比例。它用于控制 Flexible Item 的扩展比例，以及设置主轴上各个 Flexible Item 之间的比例分配。

语法

以下是 flex-grow 属性的语法：

flex-grow: <number>

其中，<number> 定义了 Flexible Item 所占据剩余空间的相对比例。

默认值为 0，表示不扩展 Flexible Item。

用法示例

考虑以下 HTML 结构：

<div class="flex-container">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
</div>

为了使用 flex-grow 属性，我们需要将父元素 .flex-container 设置为 Flex Container，使子元素 .flex-item 成为 Flexible Item，并指定一个主轴方向：

.flex-container {
  display: flex;
  flex-direction: row; /* 主轴为水平方向 */
}

接下来，我们可以将 .flex-item 的 flex-grow 属性设置为不同的值，来控制它们之间的比例：

.flex-item:nth-child(1) {
  flex-grow: 1;
}

.flex-item:nth-child(2) {
  flex-grow: 2;
}

.flex-item:nth-child(3) {
  flex-grow: 3;
}

在上面的例子中，第一个 Flexible Item 的 flex-grow 值为 1，第二个 Flexible Item 的 flex-grow 值为 2，第三个 Flexible Item 的 flex-grow 值为 3，它们之间的比例分别是 1:2:3。

完整代码：

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
  }
  
  .flex-item {
    padding: 10px;
    border: 1px solid black;
  }
  
  .flex-item:nth-child(1) {
    flex-grow: 1;
  }
  
  .flex-item:nth-child(2) {
    flex-grow: 2;
  }
  
  .flex-item:nth-child(3) {
    flex-grow: 3;
  }
</style>

<div class="flex-container">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
</div>

效果如下所示：

兼容性

flex-grow 属性兼容性良好，并且支持所有主流浏览器。不过，如果需要支持更早期的浏览器版本，可能需要加入一些针对性的前缀。

总结

CSS flex-grow 属性是用于控制 Flex 布局中 Flexible Item 所占据剩余空间的比例的。它能够控制 Flexible Item 的扩展比例，以及设置主轴上各个 Flexible Item 之间的比例分配。