css flex flex-shrink属性设置子元素放小比例

flex-shrink属性定义了子元素的缩小比例，默认为1，当父元素空间不足时，子元素将等比例缩小，如果其中一个子元素flex-shrink为0其他为1，那么为0的不缩小其他等比例缩小。

所有子元素默认为1的情况

A、B、C的宽度为父元素的50%，这样显然父元素的空间是不够用的，那么A、B、C将会等比例缩小。

#boxs
{
    width:60%;
    height:100px;
    border:1px solid #333;
    display:flex;
}
#boxs div
{
    width:50%;
}
<div id="boxs">
    <div style="background-color:#ffc5c5;flex-shrink:1;" >元素A</div>
    <div style="background-color:#7171f7;flex-shrink:1;" >元素B</div> 
    <div style="background-color:#c6d8c6;flex-shrink:1;">元素C</div>
</div>

例子

B元素flex-shrink为0的情况

子元素B不会缩小，A、C将会等比例缩小

例子