flex布局是现在前端基本上都会运用的一种布局，基本上用到比较多的是父元素设置display：flex，两个子元素，一个设置固定宽度，另一个设置为flex：1（这里都指flex-direction为row），flex属性其实是：flex-grow，flex-shrink以及flex-basis三个属性的简写，详细的这里不做多的说明，这里主要说一下flex-shrink，这个值指所有的子元素如果宽度之和大于父元素，则根据所占比例去各自减少各自应该减少的部分，比如说父元素宽度为200px，有两个子元素A，B，宽度都设为了200px，flex-shrink值分别设为2,3，此时A,B加起来宽度为400px，超出了父元素的宽度，此时A，B的实际宽度为别为：200 -（400 - 200）* 2/5 = 120px，200 -（400 - 200）* 3/5 = 80px。
根据比例减少这个，可以让我们运用到一些算法上，例如固定金额随机发固定数量的红包，具体的算法思想就是，随机生成0~1的小数，先算出随机金额，然后将所有比例相加，得到一个总的比例，这里可能小于1也可能大于1，如果小于1，则根据比例所占的总比例去相应的减少或增加。具体的代码附上：
function randMoney(total, num) {
const perMoney = []; // 最终随机金额
const perScale = []; // 随机比例
if (num === 1) {
perMoney.push(total);
} else {
for (let i = 0; i < num; i++) {
let randRatio = Math.random();
if (randRatio === 0) { // 这里如果得出比例等于0则要重新随机所以直接i--，当然这里也可以用while循环
i--;
} else {
perScale.push(randRatio);
}
}
// 得到总比例
const totalScale = perScale.reduce((pre, item) => {
return Number(pre) + Number(item);
});
let changeMoney = totalScale > 1 ? total * (totalScale - 1) : total * (1 - totalScale); // 超出或不足的金额值
perScale.forEach((item) => {
let originMoney = total * item; // 根据最初的比例得到的金额
let changeMoneyItem = changeMoney * (item / totalScale); // 差值金额
let itemMoney = totalScale > 1 ? originMoney - changeMoneyItem : originMoney + changeMoneyItem; // 得到最终的按比例计算过的金额
perMoney.push(itemMoney.toFixed(2));
});
}
console.log(`${total}随机分为${num}个红包，金额分别是：${perMoney.toString()}`);
}