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>