HTML - DOM样式对象flex属性

HTML DOM 样式对象 **flex** 属性设置或返回项目相对于同一容器内其余弹性项目的长度。如果元素不是弹性项目，则此属性不会显示任何效果。它是 `flexGrow`、`flexShrink` 和 `flexBasis` 的简写属性。

语法

设置 flex 属性

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

获取 flex 属性

object.style.flex;

属性值

值	描述
flex-grow	它指定项目相对于其余弹性项目的增长。
flex-shrink	它指定项目相对于其余弹性项目的收缩程度。
flex-basis	它指定项目的长度。其合法值包括 auto、inherit 或一个数字后跟 px、%、em 或任何其他 CSS 长度单位。
auto	它将值设置为 1 1 auto
initial	它将值设置为 0 1 auto。
inherit	它用于继承其父元素的属性。

返回值

它返回一个字符串值，表示元素的 flex 属性。

HTML DOM 样式对象“flex”属性示例

以下示例为每个弹性项目设置相等的长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 220px;
            height: 60px;
            border: 1px solid black;
            display: flex;
        }
    </style>
    <title>
        HTML DOM Style Object flex Property
    </title>
</head>
<body>
    <p>Click to apply flex property.</p>
    <button onclick="fun()">Apply</button>
    <br>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;">Hello</div>
        <div style="background-color: aqua;">Random</div>
        <div style="background-color: yellow;">Text</div>
    </div>
    <script>
        function fun() {
            let x=document.getElementById("flex");
            let y=x.getElementsByTagName("div");
            let i=0
            for(i; i<y.length;i++){
                y[i].style.flex = "1";
            }
        }
    </script>
</body>
</html>

支持的浏览器

属性
flex	是 29	是 12	是 20	是 9	是 12.1

html_dom_style_object_reference.htm

打印页面