Style flexGrow 属性 详解
css3基础 2023-07-30 02:30:44小码哥的IT人生shichen
Style flexGrow 属性
定义和用法
flexGrow 属性规定项目相对于同一容器内的其他弹性项目将增长多少。
注释：如果元素不是弹性项，则 flexGrow 属性无效。
另请参阅：
CSS 参考手册：flex-grow 属性
实例
让蓝色的 DIV 元素比其他弹性项增长五倍：
document.getElementById("myBlueDiv").style.flexGrow = "5";
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;" id="myBlueDiv"></div>
<div style="background-color:khaki;"></div>
</div>
<p>请点击“试一试”按钮，将蓝色 div 元素的 flexGrow 属性值设置为 “5”。</p>
<button onclick="myFunction()">试一试</button>
<p><b>注释：</b>Internet Explorer 10 及更早版本不支持 flexGrow 属性。</p>
<script>
function myFunction() {
document.getElementById("myBlueDiv").style.flexGrow = "5";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
语法
返回 flexGrow 属性：
object.style.flexGrow
设置 flexGrow 属性：
object.style.flexGrow = "number|initial|inherit"
属性值
| 值 | 描述 |
|---|---|
| number | 数字，规定项目相对于其他弹性项目的增量。默认值为 0。 |
| initial | 将此属性设置为其默认值。请参阅 initial。 |
| inherit | 从其父元素继承此属性。请参阅 inherit。 |
技术细节
| 默认值： | 0 |
|---|---|
| 返回值： | 字符串，表示元素的 flex-grow 属性。 |
| CSS 版本： | CSS3 |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 11.0 | 支持 | 9.0 | 支持 |
相关页面
HTML DOM STYLE 参考手册：flex 属性
HTML DOM STYLE 参考手册：flexBasis 属性
HTML DOM STYLE 参考手册：flexDirection 属性
HTML DOM STYLE 参考手册：flexFlow 属性
HTML DOM STYLE 参考手册：flexShrink 属性
HTML DOM STYLE 参考手册：flexWrap 属性
