轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

Style flex 属性

实例

让所有灵活的项目都带有相同的长度，忽略它们的内容:

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

定义和用法

flex 属性相对于同一容器其他灵活的项目，设置或返回项目的长度。

flex 属性是 flexGrow、flexShrink 和 flexBasis 属性的速记属性。

注释: 如果元素不是灵活的项目，则 flex 属性不起作用。

浏览器支持

属性
flex Yes 11.0
10.0 msFlex		 Yes 9.0 Yes

语法

返回 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。 Read about initial
none 与 0 0 auto 相同。
inherit 从父元素继承该属性。请参阅 inherit

技术细节

默认值: 0 1 auto
返回值: 字符串，表示元素的 flex 属性。
CSS 版本 CSS3

相关页面

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 属性

❮ Style 对象