HTML DOM 样式的 flex 属性

htmlweb developmentfront end technology更新于 2024/3/14 7:08:17

HTML DOM 样式的 flex 属性用于设置或返回 display 属性设置为 flex 的元素的弹性长度。它用于操作 flexGrow、flexShrink 和 flexBasis 属性。

以下是语法 −

设置 flex 属性 −

object.style.flex = "flex-grow flex-shrink flex-basis|auto|initial|inherit"

以下是取值 −

值	描述
flex-grow	它使flex项目相对于其余flex项目按给定的数字增大。
flex-shrink	它使flex项目相对于其余flex项目按给定的数字缩小。一个数字，指定flex项目相对于其余flex项目缩小的程度。
flex-basis	用于指定项目长度并采用任何合法的长度单位。
auto	将三个 flex 属性设置为 1 1 自动。
initial	将 flex 属性设置为默认值，即 0 1 自动。
none	与 0 0 自动相同。
inherit	继承父级属性值

我们来看一个 flex 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #demo {
      width: 400px;
      height: 80px;
      display: flex;
   }
   #demo div {
      flex: 1 3 auto;
   }
   div:nth-of-type(even){
      box-shadow: inset 0 0 12px red;
   }
   div:nth-of-type(odd){
      box-shadow: inset 0 0 12px blue;
   }
</style>
<script>
   function changeFlex() {
      document.getElementsByTagName("DIV")[1].style.flex="none";
      document.getElementsByTagName("DIV")[4].style.flex="none";
      document.getElementById("Sample").innerHTML="The flex value for first and fourth div is changed to none";
   }
</script>
</head>
<body>
   <div id="demo">
      <div id="orange"></div>
      <div id="green"></div>
      <div id="blue"></div>
      <div id="red"></div>
   </div>
   <p>Change the above divs flex property by clicking the below button</p>
   <button onclick="changeFlex()">Change Flex</button>
   <p id="Sample"></p>
</body>
</html>