计算以下两个子div的宽度大小：
代码如下：
<!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>
#div0 {
width: 400px;
height: 500px;
background-color: aqua;
display: flex;
}
#div0 div {
width: 200px;
height: 200px;
background-color: #c01010;
}
#div0 div:nth-child(1) {
flex-basis: 30%;
flex-grow: 1;
background-color: blue;
}
#div0 div:nth-child(2) {
flex-basis: 50%;
flex-grow: 1;
background-color: rgb(255, 251, 0);
}
</style>
</head>
<body>
<div id="div0">
<div></div>
<div></div>
</div>
</body>
</html>分析：
-
对于第一个子元素
div:nth-child(1)：- 初始宽度为
flex-basis: 30%，即 30% * 400px = 120px。
- 初始宽度为
-
对于第二个子元素
div:nth-child(2)：- 初始宽度为
flex-basis: 50%，即 50% * 400px = 200px。
- 初始宽度为
-
总的剩余空间:
400-120-200=80
-
因为两个都设置了flex-frow:1,表示会根据剩余空间进行增长
80/2=40 两个平分40
那么第一个子元素的大小为 120+40=160
第二个子元素的大小为200+40=240
因此，根据计算得到，第一个子元素的宽度为约160px，第二个子元素的宽度为约240px。
拓展：
如果一个设置了flex-grow:1 另外一个是flex-grow:2
那么就是80/3=26.67
第一个为120+26.67=146.67
第二个为200+26.67*2=253.34
