Flex-shrink计算题解

[Lirx-Xin]

Flex-shrink计算
flex-shrink为flex项目的属性，其值代表该项目的缩小比例，默认为1（即当空间不足时，默认会缩小），计算缩小值是根据所有项目所占主轴空间是否超过容器大小来计算（每个项目所占空间由属性flex-basis设置，该属性默认为auto,即该项目本身的大小），如果超过容器大小，则根据各项目大小比例与flex-shrink设置的缩小比例共同来计算。

<style>
* {
    padding: 0;
    margin: 0;
}
.container {
    width: 600px;
    height: 300px;
    display: flex;
}
.middle{
    flex-shrink: 1;
    width: 300px;
    height: 300px;
}
.left {
    flex-shrink: 1;
    height:300px;
    width:150px;
    background: red;
}
.right {
     flex-shrink: 2;
     width:250px;
     height:300px;
     background: blue;
}
<style>
<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
</div>

计算left,middle,right所占大小 flex容器大小为600px,各子项目总占大小为700px,所以多的100px需要从各项目上抽取：

计算时使用各项目大小与其flex缩小比例乘积来计算所占比例。
left：
        比例：150*1/（300*1+150*1+250*2) = 15.789...%
        所占大小：150 - 100*15.789...% = 134.21
middle：
        比例：300*1/（300*1+150*1+250*2) = 31.578...%
        所占大小：300 - 100*31.578...% = 268.4
right：
        比例：250*2/（300*1+150*1+250*2) = 52.635...%
        所占大小：250 - 100*52.635...% = 197.4