Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

flex-grow

简介

flex-grow CSS属性定义弹性盒子项(flex item)的拉伸因子。

初始值0
适用元素flex items, including in-flow pseudo-elements
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画yes, as a number
正规顺序the unique non-ambiguous order defined by the formal grammar

更多属性和信息请参见使用 CSS flexible boxes

语法

Formal syntax: <number>
flex-grow: 3

flex-grow: inherit

<number>
参见<number>。负值无效。

示例

element { 
  flex-grow: 3;
}

规范

规范 状态 备注
CSS Flexible Box Layout Module Candidate Recommendation  

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 18.0 (18.0) (behind a pref) [1]
20.0 (20.0)
21.0-webkit 未实现 12.10 未实现
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support ? ? 未实现 12.10 未实现

[1] Firefox在Firefox 28以前只支持单行弹性盒。Firefox 18和19的用户需要把about:config的 "layout.css.flexbox.enabled"改为true以启用弹性盒支持。

[2] 在Firefox 32之前, Gecko不能动画过渡始于或止于0的值。

参见

文档标签和贡献者

 此页面的贡献者: Sebastianz, fscholz, fskuok, teoli, Ribery
 最后编辑者: Sebastianz,