CSS - flex-grow 属性

CSS flex-grow 属性决定弹性项目在其主轴上应占据多少额外空间。为了使该属性生效，元素必须是弹性元素。

语法

flex-grow: number | initial | inherit;

属性值

值	描述
数字	指定元素相对于其他弹性项目增长的程度。默认值为 0。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Flex Grow 属性示例

以下示例解释了使用不同值的 flex-grow 属性。

使用数值的 Flex Grow 属性

为了让元素相对于其他弹性项目在其主轴上增长，我们使用数值（例如 1、3、5 等）指定增长因子。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         padding: 5px;
         background-color: lightgray;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 10px;
         margin: 5px;
      }

      .flex-item1 {
         flex-grow: 1.5;
      }

      .flex-item2 {
         flex-grow: 3;
      }

      .flex-item3 {
         flex-grow: 2;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-grow property
   </h2>
   <h4>
      flex-grow: 1.5 (flex item1), 
      3 (flex item2), 2 (flex item3)
   </h4>
   <div class="flex-container">
      <div class="flex-item1">
         Flex item 1
      </div>
      <div class="flex-item2">
         Flex item 2
      </div>
      <div class="flex-item3">
         Flex item 3
      </div>
   </div>
</body>

</html>

使用初始值的 Flex Grow 属性

initial 值将增长因子设置为默认值，在本例中为 0。因此，使用此值的项目不会增长。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         padding: 5px;
         background-color: lightgray;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 10px;
         margin: 5px;
      }

      .flex-item1 {
         flex-grow: initial;
      }

      .flex-item2 {
         flex-grow: 2;
      }

      .flex-item3 {
         flex-grow: initial;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-grow property
   </h2>
   <h4>
      flex-grow: 0 (flex item1), 
      2 (flex item2), 0 (flex item3)
   </h4>
   <div class="flex-container">
      <div class="flex-item1">
         Flex item 1
      </div>
      <div class="flex-item2">
         Flex item 2
      </div>
      <div class="flex-item3">
         Flex item 3
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
flex-grow	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

打印页面