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

列印頁面