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 支持