老师，我的问题是3-15的选择题。
来源：3-15 选择练习
慕斯0469344
2019-09-11 15:20:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>box-sizing</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
font-size: 24px;
}
ul{
display: flex;
width: 1000px;
height: 100px;
background-color: pink;
}
li{
width:100px;
flex-grow: 1;
}
li:nth-child(1){
flex-basis: 200px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>老师，这个为什么在给定第一个li的宽度是375px的情况下，后三个li的宽度都是225px?因为代码中也设置了li的宽度是100px啊。
1回答
-
同学你好！
因为第一个li设置了flex-basis: 200px。
首先需要理解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
相似问题