不理解为什么是C，看了答案了，还是不理解

老师，这里父元素的宽度是1000，第一个li是200，其他3个分别是100，加起来已经占用了500px了。1000-500，还有500，不应该是这500/4，就是每个li分配的宽度吗？根据答案说的是C，那li设置的100px，和第一个设置的200px，有什么用？不算入吗？

王一宏 2020-04-20

源自：flex弹性布局 4-8 选择题

收起

1回答

卡布琦诺 2020-04-20 19:29:32

同学你好，首先我们知道总宽度是1000px，有4个li，每个li的宽度是100px，总共个占父元素的400px，父元素还剩下600px，但是第一个li设置了flex-basis: 200px;也就是第一个li向父元素预支了200px的宽度，因此第一个li的宽度按照200px计算，而不是100px。也就是说第一个li的宽度是200px，第二个、第三个、第四个li的宽度是100px，即所有li的总宽度是200px+100px*3=500px，这个时候父元素还剩下500px空余。因为每个li都设置了flex-grow: 1，即平分父元素剩余空间，也就是剩余的500px/4=125px，第一个li的宽度=原本的宽度+平分的宽度=200+125=325px，第二个、第三个、第四个li的宽度=原本的宽度+平分的宽度=100px+125px=225px

如果我的回答帮助了你，希望采纳，祝学习愉快！

收起回答

提问者王一宏 #1

恩恩，明白了。后边没算清楚

2020-04-20 21:54:31
提问者王一宏 #2

flex-basis 属性用于设置弹性容器缩基准值，默认值是auto，就是去均摊容器所剩的空间；已知第一个li所占的空间是325px，那么ul所剩的空间就是675px，剩余的3个li均摊，那么每个所占的空间就是225px 老师，上边的文字的答案的解释。和我理解的不一样。所以不理解答案。因为li都设置了100px，还有第一个是200px。所以答案根本没用到这两个，还用了个325。

2020-04-21 10:20:39
卡布琦诺回复提问者王一宏 #3

同学你好，这个解析只是缺少了反推的计算过程，其实如果进行反推计算，意思跟上面我给同学解释的是一个意思哦，首先，已知第一个li的宽度是325px，第一个li设置了flex-basis: 200px向父元素预支200px的宽度，那么325px-200px=125px，这125px就是li设置了flex-grow均分父元素所得宽度，由此推算出每个li都均分到了125px，又因为每个li设置的宽度是100px，所以剩余3个li（每个）的宽度是125px+100px=225px，因为li自身设置的宽度都是100px，均分父元素的宽度也都是相等的，也就是说后三个li的最终宽度是相等的，所以可以使用ul剩余宽度675px/3来计算。得到的值也是正确的。祝学习愉快！

2020-04-21 11:21:58