学习flex布局时遇到的一个小问题
提问: 观察下面的代码，已知li为“html”的宽度是325px，其余的3个li宽度分别是多少？(问题如下) 一开始在解题的过程中，认为本题的答案是266px 266px 266px。但是答案为225px 225px 225px。百思不得其解之下，寻求老师的帮助，发现这道题目让我陷入了误区。我一开始是把四个li都看作100px并且平均分为四等分，再因为flex-basis: 200px;而把第一个子容器的宽度设为200px，其他的三个子容器平均3等分，从而得到结果266px 266px 266px。而事实上，是把第一个子容器设为200px，其他三个子容器设为100px。再因为flex-grow: 1;把父容器中还未被填满的500px的空间平均四等分分给了四个子容器，所以第一个子容器的宽度为200px + 125px，其他三个子容器的宽度为100px + 125px。结果显而易见，其他三个子容器的宽度为225px 225px 225px。
总结:
遇事不决，可以把题目敲下来运行一下，能够更好的解决问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>JQuery</li>
</ul>
</body>
</html>
