CSS - flex-grow 属性

描述

CSS Flexbox 属性 flex-grow 决定了 Flex 布局容器内的一个项目沿主轴方向应该扩展多少以填充可用空间。

flex-grow 属性采用数值，表示 Flex 项目应按比例占用 Flex 布局容器中额外空间的多少。

可能的值

整数 - 任何有效的整数。

应用于

DOM 语法

flex-grow: any integer value;

以下示例显示了此属性的效果：

<html>
<head>
<style>
   .my_flex_grow {
      display: flex;
      background-color: #0ca14a;
   }
   .my_flex_grow div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my_flex_grow">
      <div style="flex-grow: 3">Flex item 1</div>
      <div style="flex-grow: 1">Flex item 2</div>
      <div style="flex-grow: 6">Flex item 3</div>
   </div>
</body>
</html>