CSS 属性

CSS flex-grow 属性确定 Flex 项目应在 Flex 容器中沿其主轴占据多少额外空间。

当 Flex 容器中的空间大于 Flex 的组合尺寸时，会出现多余空间项目，根据每个项目的增长因子占所有项目的弹性增长因子总和的比例进行分配。

属性值

  • <number>: 任何有效的正数。负值无效。

适用范围

Flex 项目，包括流入伪元素

语法

flex-grow: <number>;

CSS flex-grow: <number>

以下示例演示了 flex-grow: 3 属性将第一个 Flex 项目增长为其他项目的三倍 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
   .flex-item1 {
      flex-grow: 3;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>