计算以下两个子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;}#div0 div:nth-child(1) {flex-basis: 30%;flex-shrink: 1;background-color: blue;}#div0 div:nth-child(2) {flex-basis: 90%;flex-shrink: 3;background-color: rgb(255, 251, 0);}</style>
</head><body><div id="div0"><div></div><div></div></div>
</body></html>
解析:
1、计算元素的溢出的部分
因为我们flex-basis用的百分比 ,首先先计算各占多少像素
元素一:0.3*400=120
元素二:0.9*400=360
所以他们两者总大小为:480
溢出部分:480-400=80
2、计算他们的总权重值
120*1+360*3=1200
3、分别计算收缩量
元素一:80*1*(120/1200)=8
元素二:80*3*(360/1200)=72
4、计算他们的大小
元素一:120-8=118
元素二:360-72=288