这里设置col{flex-basis:0;flex-grow:1;}是干嘛用的?

来源:5-1 实现栅格系统--基础部分

weixin_慕前端6235132

2020-05-24 10:32:46

http://img.mukewang.com/climg/5ec9dccc096a91a503680227.jpg

写回答

1回答

好帮手慕夭夭

2020-05-24

同学你好,问题解答如下:

1.flex-grow 定义剩余空间的分成。例如不设置此样式时,默认为0,剩余的空间不会分成。

http://img.mukewang.com/climg/5ec9f22109d328df12450256.jpg

当设置此样式属性值为1时,子项目就会放大,均分剩余空间:

http://img.mukewang.com/climg/5ec9f28309565be412230136.jpg

2.flex-basis: 定义了项目占据的主轴空间。默认值为auto,即项目的本来大小。如下为默认情况:

http://img.mukewang.com/climg/5ec9f2c809631e9211940346.jpg

当设置了flex-basis: 0 ,此时子项目就会排列在一行显示,宽度就是由内容撑开的。

http://img.mukewang.com/climg/5ec9f2f909eb7d5805610267.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 6815 问题

查看课程