CSS参考手册
灵活的框布局 | Flexible Box Layout
flex-grow
CSSflex-grow
属性定义弹性盒子项(flex item)的拉伸因子。
/* <number> values */
flex-grow: 3;
flex-grow: 0.6;
/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
初始值 |
0 |
---|---|
适用于 |
弹性项目,包括流入的伪元素 |
遗传 |
没有 |
媒体 |
视觉 |
计算值 |
作为指定 |
动画类型 |
一个号码 |
规范的顺序 |
形式语法定义的独特的非模糊顺序 |
更多属性和信息请参见使用 CSS 弹性盒子。
语法
CSS 属性值定义语法: <number>
取值
<number>
参见<number>
。负值无效。
形式语法
<number>
例
HTML
<h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
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 |
灵活的框布局 | Flexible Box Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。