CSS - flex-grow 屬性

CSS flex-grow 屬性決定彈性專案在其主軸上應占據多少額外空間。為了使該屬性生效，元素必須是彈性元素。

語法

flex-grow: number | initial | inherit;

屬性值

值	描述
數字	指定元素相對於其他彈性專案增長的程度。預設值為 0。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS Flex Grow 屬性示例

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

使用數值的 Flex Grow 屬性

為了讓元素相對於其他彈性專案在其主軸上增長，我們使用數值（例如 1、3、5 等）指定增長因子。以下示例顯示了這一點。

示例

<!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。因此，使用此值的專案不會增長。以下示例顯示了這一點。

示例

<!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

列印頁面