本文摘自PHP中文网,作者藏色散人,侵删。
css flex-grow属性用于设置或检索弹性盒子的扩展比率,CSS语法是flex-grow: number|initial|inherit;如果元素不是弹性盒对象的元素,则flex-grow属性不起作用。
css flex-grow属性怎么用?
定义和用法
flex-grow 属性用于设置或检索弹性盒子的扩展比率。
注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。
默认值: 0
继承: 否
可动画化: 是。
版本: CSS3
JavaScript 语法:
1 | object.style.flexGrow= "5"
|
CSS 语法:
1 | flex-grow: number|initial|inherit;
|
属性值
number 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
实例
让第二个元素的宽度为其他元素的三倍:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!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: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
</style>
</head>
<body>
<div id= "main" >
<div style= "background-color:coral;" ></div>
<div style= "background-color:lightblue;" ></div>
<div style= "background-color:khaki;" ></div>
<div style= "background-color:pink;" ></div>
<div style= "background-color:lightgrey;" ></div>
</div>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-grow 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-grow 属性支持该属性。</p>
</body>
</html>
|
效果:

以上就是css flex-grow属性怎么用的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css中定位position属性的用法是什么
css3跟css区别是什么
css需要什么环境
css如何设置td溢出隐藏
css径向渐变怎么用
jquery怎么操作css设置高度
background-attachment属性怎么用
css3代码和css有不同吗
怎样操作meta标签中的viewport来控制设备屏幕的css属性
css的引入方式有哪些
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css flex-grow属性怎么用