css flex layou,flex-grow_灵活的框布局 | Flexible Box Layout_CSS_参考手册_非常教程

flex-grow

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

/* values */

flex-grow: 3;

flex-grow: 0.6;

/* Global values */

flex-grow: inherit;

flex-grow: initial;

flex-grow: unset;

初始值

0

适用于

弹性项目，包括流入的伪元素

遗传

没有

媒体

视觉

计算值

作为指定

动画类型

一个号码

规范的顺序

形式语法定义的独特的非模糊顺序

更多属性和信息请参见使用 CSS 弹性盒子。

语法

CSS 属性值定义语法:

取值

参见。负值无效。

形式语法

例

HTML

This is a Flex-Grow

A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .

A

B

C

D

E

F

CSS

#content {

-ms-box-orient: horizontal;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -moz-flex;

display: -webkit-flex;

display: flex;

-webkit-justify-content: space-around;

justify-content: space-around;

-webkit-flex-flow: row wrap;

flex-flow: row wrap;

-webkit-align-items: stretch;

align-items: stretch;

}

.box {

flex-grow: 1;

border: 3px solid rgba(0,0,0,.2);

}

.box1 {

flex-grow: 2;

border: 3px solid rgba(0,0,0,.2);

}

结果

规范

Specification

Status

Comment

CSS Flexible Box Layout ModuleThe definition of 'flex-grow' in that specification.

Candidate Recommendation

Initial definition

浏览器兼容性

Feature

Firefox (Gecko)

Chrome

Edge

Internet Explorer

Opera

Safari

Basic support

18.0 (18.0)1

21.0-webkit

(Yes)-webkit (Yes)

113

12.10

6.1-webkit

< 0 animate

32.0 (32.0)2

49.0

?

?

No support

No support

Feature

Firefox Mobile (Gecko)

Android

Edge

IE Phone

Opera Mobile

Safari Mobile

Basic support

18.0 (18.0)1

?

(Yes)-webkit (Yes)

No support

12.10

No support

< 0 animate

32.0 (32.0)2

?

?

?

No support

No support