flex-grow 与 flex-shrink

flex-grow

• 默认0，同步放大
• 弹性盒子的扩展比例
• 分配剩余空间的权利

例子

flex-grow示例：

    
a
    
b
    
c
    
d
    
e



            

结论：剩余待分配空间为600px - 5 * 100px = 100px第二个li、第三个li和第四个li会按照1:2:2的比率来分配100px，所以结果5个li的宽度分别为100px,120px,140px,140px,100px,100px;

flex-shrink

• 默认1，同步缩小
• 弹性盒子的缩减比例
• 空间不够时如何收缩空间

例子

flex-shrink示例：

    
a
    
b
    
c

结论：收缩空间为600px - 400px = 200px 第二个li和第三个li会按照1:3的比率来收缩空间，所以3个li的宽度分别为200px,150px,50px;