flex布局的伸缩规则
flex: flex-grow flex-shrink flex-basis;
flex-grow：变大 flex-shrink:缩小 flex-basis:基础值
当为变大模式时候：
父容器的宽度比所有子元素的基础值都大的时候，;子元素的变大的宽度为，超出的宽度乘以 flex-grow所占的比例。
子元素1的宽度为
当为缩小模式时候：
父容器的宽度比所有子元素的基础值都小的时候，,即缩小模式，子元素的宽度为，基础值 + 不足部分（为负）乘以 flex-shrink和 flex-basis所占的比例
子元素1的宽度
子元素2的宽度
.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>
