3回答

好帮手慕慕子

2020-08-23

同学你好， 对于你的问题解答如下：

1. 因为每个li设置了flex-grow属性值为1，也就是项目会扩展。习题中给出的325px是扩展之后的，也就是包括了占据剩余空间的总宽度，需要根据这个宽度就计算其他li占据的总宽度。

   总共有4个li，li的宽度是100px，但是因为第一个li设置了 flex-basis:200px；也就是说flex-basis:200px;会替代li设置的宽度100px，那么，这个时候第一个li的宽度可以理解成是200px，其他三个没有设置flex-basis属性的li宽度仍然是100px，那么，四个li的宽度总和是200px+100px*3=500px，而ul的总宽度是1000px，被li占去500px，还剩下500px，这500px，会由父级元素平均分配给四个li，分成4份，每一份是125px，那么，第一个li就是flex-basis设置的200px+自动分配的125px，变成了325px，第二个li、第三个li、第四个li的宽度就会变成原本li设置的100px+自动分配的125px，就变成了225px。
   

2. 因为每个li设置了flex-grow属性值为1，所以子元素会扩展，均分父元素剩余的空间。

3. 由第二条可知，是因为设置了flex-grow：1；属性，子元素才会均分父元素剩余的空间，而同学截图的测试代码中，并没有设置该属性，所以无法实现效果。

   建议：添加flex-grow:1属性后再测试下，示例：

   

   效果图：

   

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

0

陈立天

提问者

2020-08-23

根据老师的代码进行了测试

0

陈立天

提问者

2020-08-23

另外在问下 老师这个问答里面回答的 是要在给父元素设置了什么的情况下，或者是写了什么代码， 子元素才会参与父元素的剩余空间平均分配？

0