flex：1 是 flex-grow: 1, flex-shrink: 1，flex-basis: 0% 的缩写；
flex-grow：指定了一个元素的放大比例，决定元素在剩余空间中的扩展比例。
flex-shrink：指定了一个元素的缩小比例，决定元素在空间不足时收缩的比例。
flex-basis: 指定了项目在主轴方向上的初始大小，即项目的基准大小。可以是一个具体的长度值
举例子
flex-grow
父容器宽度是500px，div flex-basis分别是100px 150px 150px； flex-grow 分别是 3 1 4;
剩余容器宽度 = 500px - 100px - 150px -150px = 100px，即flex-grow生效
份额即为 100px/(3+1+4) = 12.5px
即 子元素的长度分别为 100+ 12.5*3 = 137.5px,依次， 162.5px 200px
flex:1 实现均分
父容器宽度是500px，子div flex:1 flex-basis是0%； flex-grow和flex-shrink分别是1;
剩余容器宽度 = 500px - 0px - 0px -0px = 500px，即flex-grow生效
份额即为 500px/(1+1+1) = 166.66px
即 子元素的长度分别为 0+ 166.66*1 = 166.66px,依次， 166.66px 166.66px
flex-shrink
父容器宽度是500px，div flex-basis分别是100px 200px 300px； flex-shrink 分别是 3 1 4;
剩余容器宽度 = 500px - 100px - 200px - 300px = -100px ，超出父容器宽度，即flex-shrink生效
注意：和flex-grow不一样，第一个子元素的缩小像素 即（100x3）/(100x3+200x1+300x4) x 100 = 17.64px
flex-basis ✖️ flex-shrink /sum(flex-basis ✖️flex-shrink)
依次第二个子元素（200x1）/(100x3+200x1+300x4) x 100 = 11.76px
300x4/(100x3+200x1+300x4) x 100 = 70.58px;
后续
mdn没有明确的flex-shrink的计算方法。
developer.mozilla.org/en-US/docs/… 以及原因，有知道的小伙伴吗？
