1回答

樱桃小胖子

2019-04-23

首先需要理解flex-basis这个属性，flex-basis这个属性值的作用也就是width的替代品，如果子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间，然后父容器再把剩余空间分配给设置了flex-grow的容器，观察代码：

总共有4个li，li的宽度是100px，但是因为第一个li设置了

li:nth-child(1){
    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。

另外：

因为

li{
width:100px;
flex-grow:1;
}

这个li是给所有的li设置样式，因此li:nth-child(1)，也就是第一个li也有flex-grow:1;属性。

希望可以帮到你！

7

hJJustin

h 虽然我能推算出答案 但是之前一直不是很懂

h019-08-15

共4条回复