1、flex-grow指扩展flex子项所占据的宽度,扩展的空间就是除去元素外剩余的空白间隙。
2、不支持负值,默认值是0,表示不占用剩余的空白间隙扩展自己的宽度。
如果flex-grow大于0,则flex容器剩余空间的分配就会发生。
实例
//HTML部分 <div> <div></div> <div></div> <div></div> </div> //CSS部分 .box{ width:600px; height:200px; border:1pxsolid; display:flex; } .boxdiv:nth-of-type(1){ width:100px; height:100px; background-color:red; } .boxdiv:nth-of-type(2){ width:150px; height:100px; background-color:skyblue; } .boxdiv:nth-of-type(3){ width:200px; height:100px; background-color:yellow; }
以上就是css中flex-grow属性的介绍,希望对大家有所帮助。更多css学习指路:css教程
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容