flex布局中flex属性运用在随机发红包的算法上

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()}`);

    }