计算以下两个子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