HTML DOM 样式的 flexGrow 属性

htmlweb developmentfront end technology更新于 2024/3/14 9:16:17

HTML DOM 样式的 flexGrow 属性用于设置元素在 flex 元素内适应其大小的比例。它接受无单位的数值。

以下是语法 −

设置 flexGrow 属性 −

object.style.flexGrow = "number|initial|inherit"

此处，number 指定元素相对于其他元素的增长比例，其默认值为 0。initial 将属性值设置为默认值，而 inherit 将其设置为父级属性值。

让我们看一个 flexGrow 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      height: 100px;
      border: 3px groove navy;
      display: flex;
      text-align: center;
      line-height: 90px;
   }
   div div {
      box-shadow: inset 0 0 4px indigo;
   }
   #demo div:nth-of-type(even) {
      flex-grow: 1;
      background-color: lavender;
   }
   #demo div:nth-of-type(odd) {
      flex-grow: 1;
      background-color: thistle;
   }
</style>
<script>
   function changeFlexGrow() {
      for(var i=1;i<6;i+=2)
         document.getElementsByTagName("div")[i].style.flexGrow="3";
         document.getElementById("Sample").innerHTML="The odd div elements are now grown 3x their    even counterparts";
   }
</script>
</head>
<body>
   <div id="demo">
      <div></div>
      <div></div>
      <div>DEMO</div>
      <div></div>
      <div></div>
   </div>
   <p>Change the above odd div size by clicking the below button</p>
   <button onclick="changeFlexGrow()">Change Flex Grow</button>
   <p id="Sample"></p>
</body>
</html>