HTML DOM 样式的 flexShrink 属性

htmlweb developmentfront end technology更新于 2024/3/14 10:20:17

HTML DOM 样式的 flexShrink 属性用于设置元素相对于 flex 元素内其他同级元素缩小尺寸的比例。

以下是语法 −

设置 flexShrink 属性 −

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

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

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

示例

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      margin: auto;
      box-shadow: inset 0 0 3px rgba(0,0,0,0.4);
   }
   #demo {
      width: 500px;
      height: 30px;
      display: flex;
      text-align: center;
      font-size: 1.2em;
      line-height: 30px;
   }
   #demo div {
      flex-basis: 120px;
   }
</style>
<script>
   function changeFlexShrink() {
      document.getElementsByTagName("DIV")[4].style.flexShrink="3";
      document.getElementById("Sample").innerHTML="The fourth element has been shrinked by 3x their    counterparts";
   }
</script>
</head>
<body>
   <div id="demo">
      <div>First Div</div>
         <div>Second Div</div>
      <div>Third Div</div>
      <div>Fourth Div</div>
      <div>Fifth Div</div>
   </div>
   <br>
   <p>Change the 4th div shrink property in the above divs by clicking the below button</p>
   <button onclick="changeFlexShrink()">Change Flex Shrink</button>
   <p id="Sample"></p>
</body>
</html>