flex

flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

uni-app x 兼容性

Android	iOS	web
3.9	4.11	4.0

语法

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

flex 的属性值

initial 元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。

auto 元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

none 元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

默认值

平台	默认值
uvue	none

注意：W3C 默认值为：initial

兼容性

flex 的属性值兼容性

	Android	iOS	web
initial	3.9	4.11	4.0
auto	3.9	4.11	4.0
none	3.9	4.11	4.0

浏览器兼容性

	Chrome	Edge	Firefox	Opera	Safari	IE
flex	√（ 29 ）	√（ 12 ）	√（ 20 ）	√（ 12.1 ）	√（ 9 ）	√（ 11 ）

参见

• MDN Reference
• 相关 Bug