flex: flex-grow flex-shrink flex-basis;

flex-grow：变大 flex-shrink:缩小 flex-basis:基础值

$W_{多余} = W_{父} - （W1_{flexBasis} + W2_{flexBasis} ）$

当为变大模式时候：

父容器的宽度比所有子元素的基础值都大的时候， $W_{多余} >0$ ;子元素的变大的宽度为，超出的宽度乘以 flex-grow所占的比例。

子元素1的宽度为 $W_{子1} = （子1_{flexGrow} /（子1_{flexGrow} +子2_{flexGrow} ））* W_{多余} + W1_{flexBasis}$

当为缩小模式时候：

父容器的宽度比所有子元素的基础值都小的时候， $W_{多余} < 0$ ,即缩小模式，子元素的宽度为，基础值 + 不足部分（为负）乘以 flex-shrink和 flex-basis所占的比例

子元素1的宽度 $W_{子1} = 子1_{flexBasis} + W_{多余} * （子1_{flexShrink} * 子1_{flexBasis} /(子1_{flexShrink} * 子1_{flexBasis} +子2_{flexShrink} * 子2 _{flexBasis} ) ）$

子元素2的宽度 $W_{子2} = 子2_{flexBasis} + W_{多余} * （子2_{flexShrink} * 子2_{flexBasis} /(子1_{flexShrink} * 子1_{flexBasis} +子2_{flexShrink} * 子2 _{flexBasis} ) ）$

  .box {      display: flex;      width: 600px;      margin-bottom: 40px;    }

div {      color: #fff;    }

.div1 {      flex: 1 2 200px;      background: blue;    }

.div2 {      flex: 2 2 100px;      background: red;    }

.div3 {      flex: 1 2 400px;      background: blue;    }

.div4 {      flex: 2 1 300px;      background: red;    }

具体代码

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> .box { display: flex; width: 600px; margin-bottom: 40px; } div { color: #fff; } .div1 { flex: 1 2 200px; background: blue; } .div2 { flex: 2 2 100px; background: red; } .div3 { flex: 1 2 400px; background: blue; } .div4 { flex: 2 1 300px; background: red; } </style> <body> <div class="box"> <div class="div1">div1</div> <div class="div2">div1</div> </div> <p> div1的宽度：200 + （300）*1/(2 + 1) = 300 </p> <p> div2的宽度：100 + （300）*2/(2 + 1) = 300 </p> <div class="box"> <div class="div3">div3</div> <div class="div4">div4</div> </div> <p> div3的宽度：400 + （-100）*（2 * 400）/(2*400 + 1* 300) = 327.27 </p> <p> div4的宽度：300 + （-100）*（1 * 300）/(2*400 + 1* 300) = 272.72 </p> </body></html>