flex
- flex ==> flex-grow flex-shrink flex-basic
- flex-grow 当还有剩余空间时，为有该属性子元素按比例分配剩余空间。默认：0.
- flex-shrink 当子元素的宽度超出父元素时，包含该属性的子元素按比例减去超出的宽度。默认：1.
- flex-basic 指定元素的宽度，优先级高于width
// 求left和right宽度比例
// css
.container {
display: flex;
width: 200px;
height: 50px;
}
.left {
flex: 1 2 50;
height: 50px;
backgroundColor: 'red';
}
.right {
flex: 2 1 200;
height: 50px;
backgroundColor: 'green';
}
// html
<div class="container">
<div class="left"><div/>
<div class="right"><div/>
</div>
思路
1 先用flex-basic来确认子元素的宽度，与父元素宽度做对比
2 当父容器有剩余空间时，用flex-grow为子元素按比例分配剩余空间
3 当元素超出父容器时，超出的部分按照flex-shrink的比例缩减子元素的大小
4 根据flex-basic，目前left + right的宽度为250.超过container的200，使用flex-shrink来缩减
5 left的比例是2，right的比例是1，需要减少的大小是50
6 left需要减少 (50 * 2) / (50 * 2 + 200 * 1) * 50 = 50 / 3, right需要减少(200 * 1) / (50 * 2 + 200 * 1) * 50 = 100 / 3
7 最终left的大小是50 - (50 / 3), right的大小是200 - (100 / 3)
8 比例 = (50 - (50 / 3)) / (200 - (100 / 3)) = 1 / 5
另一种好理解的计算方法（2021.10.27补充）
1. 设x为压缩率，flex-shrink为压缩比
2. 50 * (1 - 2x) + 200 * (1- x) = 200
3. 250 - 300x = 200, x = 1/6
4. left = 50 * (1 - 1/3) = 100 / 3, right = 200 * (1 - 1/6) = 500 / 3
