©2020-2024 ioDraw All rights reserved
什么是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、 弹性盒子元素如何分配剩余空间