flex布局 flex-grow和flex-shrink

 

1、flex-grow（默认0）：当子元素没设置width时，子元素会按比例平分父元素设置的宽度，当子元素设置了width，如

ul{
    display: flex;
    justify-content: space-between;
    width: 1000px;
}
.a{
    width: 200px;
    background: aquamarine;
    flex-grow: 1;
}
.b{
    background: azure;
    width: 200px;
    flex-grow: 1;
}
.c{
    background: red;
    width: 100px;
    flex-grow: 8;
}

则将计算剩余的宽度也就是500px，按flex-grow的比例分给子元素得出a b c 的宽度分别为250 250 500；

2、flex-shrink（默认1）：shrink的计算跟grow有所不同，他的计算是将width*flex-grow一起；

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

ul{     display: flex;     justify-content: space-between;     width: 400px; } .a{     width: 200px;     background: aquamarine;     flex-shrink: 1;   } .b{     background: azure;     width: 200px;     flex-shrink: 1;   } .c{     background: red;     width: 100px;     flex-shrink: 4;   }

　　整行缺少宽度 200+200+100-400=100；a的占比是200*1，b的占比是200*1，c的占比是100*4，分别是 1 1 2，所以最终a b c 的宽度分别是175 175 50，如果父元素由400缩小到300，则a b c 分别是 150 150 0.但当c中如果有文字撑开则另算 

js