Style flex 屬性

定義和用法

flex 屬性設置或返回項目的長度，相對于同一容器內的其余彈性項目。

flex 屬性是 flexGrow、flexShrink 和 flexBasis 屬性的簡寫屬性。

注釋：如果元素不是彈性項，則 flex 屬性無效。

另請參閱：

CSS 參考手冊：flex 屬性

HTML DOM STYLE 參考手冊：flexBasis 屬性

HTML DOM STYLE 參考手冊：flexDirection 屬性

HTML DOM STYLE 參考手冊：flexFlow 屬性

HTML DOM STYLE 參考手冊：flexGrow 屬性

HTML DOM STYLE 參考手冊：flexShrink 屬性

HTML DOM STYLE 參考手冊：flexWrap 屬性

實例

讓所有彈性項的長度相同，而不管其內容如何：

for (i = 0; i < y.length; i++) {
  y[i].style.flex = "1";
}

親自試一試

語法

返回 flex 屬性：

object.style.flex

設置 flex 屬性：

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

屬性值

值 描述
flex-grow 數字，規定項目相對于其他彈性項目的增長量。
flex-shrink 數字，規定項目相對于其他彈性項目的縮減量。
flex-basis

項目的長度。

合法值："auto"、"inherit"，或單位為 "%", "px", "em" 的值，或任何其他長度單位。
auto 等同于 1 1 auto。
initial 等同于 0 1 auto。參閱 initial。
none 等同于 0 0 auto。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： 0 1 auto
返回值： 字符串，表示元素的 flex 屬性。
CSS 版本： CSS3

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 11.0 支持 9.0 支持