css深入理解flex布局中的剩余空间分配规则——flex-grow，flex-shrink和flex-basis

案例——范张、范鑫和范旭每人有100万元固定家产，范帅和范哥有20万元保底家产。如果范某去世那天家产还有富余，则范帅和范哥按照3:2比例分配；如果没有剩余家产，则范张、范鑫和范旭按照2:1:1的比例分别给范帅和范哥匀20万元保底家产。

<div class="container">
    <item clas="zhang">范张</item>
    <item clas="xin">范鑫</item>
    <item clas="xu">范旭</item>
    <item clas="shuai">范帅</item>
    <item clas="ge">范哥</item>
</div>

.container {
    /* 范某：来，家产分配开始了 */
    display: flex;  
}
.zhang {
    /* 老大不会争夺多余家产，但是会在家产不足时分出2倍于老二和老三分出的家产，这是作为老大应有的姿态 */
    flex: 0 2 100px;    
}
.xin,
.xu {
    /* 老二和老三不会争夺多余家产，但是会在家产不足时分出部分家产，照应老四和老五 
    这里也可以直接写成flex: 100px */
    flex: 0 1 100px;    
}
.shuai {
    /* 老四会争夺多余家产，且会在家产不足时获得哥哥们分出的家产，确保能够活下去，感谢3位哥哥的照顾 */
    flex: 3 0 20px;    
}
.ge {
    /* 老五会争夺多余家产，不过拿到的比哥哥少一点，且会在家产不足时获得哥哥们分出的家产，感谢哥哥们的照顾 */
    flex: 2 0 20px;    
}

效果见 https://demo.cssworld.cn/new/6/2-9.php
（浏览器调为手机模式，改变屏幕宽度，查看效果）