什么是flex-grow 属性❓

flex-grow 属性用于设置或检索弹性盒子的扩展比率。

❗注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。

CSS 语法

flex-grow: number|initial|inherit;

属性值

值描述
number一个数字,规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。
 测试代码
<!DOCTYPE html> <html> <head> <style> #main { width: 350px; height: 100px;
border: 1px solid #000; 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;">1</div> <div
style="background-color:lightblue;">3</div> <div
style="background-color:khaki;">1</div> <div
style="background-color:pink;">1</div> <div
style="background-color:lightgrey;">1</div> </div> </body> </html>
效果图

关于flex-grow属性的例题

1、flex-grow的作用是(D)

A、 弹性盒子元素对齐方式

B、 弹性盒子元素的排列方式

C、 弹性盒子元素显示次序

D、 弹性盒子元素如何分配剩余空间

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信