最新回答 / salute_ryGM69
<!DOCTYPE html><html lang="zh-CN"><head>? ? <meta charset="UTF-8">? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">? ? <title>Document</title>? ? <style>? ? ? ? #form div{? ? ? ? ? ?...
2023-03-16
舉個例子:
#div0{
width:200px;
display:flex;
height:500px;
}
#div0 div:nth-child(1){
flex:0 1 150px;
}
#div0 div:nth-child(2){
flex:0 1 250px;
}
用他的錯誤計算方法是
200-(150+250)=-200
-200/2=-100
div1:150-100=50
div2:250-100=150
而正確值是75和125
#div0{
width:200px;
display:flex;
height:500px;
}
#div0 div:nth-child(1){
flex:0 1 150px;
}
#div0 div:nth-child(2){
flex:0 1 250px;
}
用他的錯誤計算方法是
200-(150+250)=-200
-200/2=-100
div1:150-100=50
div2:250-100=150
而正確值是75和125
2021-06-23
10:45秒計算 flex-shrink 的方法是錯誤的。
錯誤的方法卻造成了正確的結(jié)果是由于兩個元素的flex-basis一樣。
正確的算法應(yīng)該是:
1:計算差值 400-(300+300)=-200
2:計算權(quán)重 300*1+300*3=1200
3:計算被移除量:
div1:-200*1(flex-shrink)*300/1200=-50
div2:-200*3(flex-shrink)*300/1200=-150
實際寬度:
div1:300-50=250
div2:300-150=150
錯誤的方法卻造成了正確的結(jié)果是由于兩個元素的flex-basis一樣。
正確的算法應(yīng)該是:
1:計算差值 400-(300+300)=-200
2:計算權(quán)重 300*1+300*3=1200
3:計算被移除量:
div1:-200*1(flex-shrink)*300/1200=-50
div2:-200*3(flex-shrink)*300/1200=-150
實際寬度:
div1:300-50=250
div2:300-150=150
2021-06-23