1回答

好帮手慕慕子

2022-03-17

同学你好，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。可以结合如下示例理解： 盒子的宽度是任意设置的，这里只是一个参考示例

（1）溢出空间部分为：项目的宽度之和 -  容器的宽度，即： 300px+500px-500px = 300px　　

（2）计算总权重：每个项目的宽度乘以flex-shrink系数的总和。即：300*1+500*2 = 1300px

（3）计算每个项目的收缩空间为：溢出空间 *(项目宽度 * flex-shrink / 总权重)

项目1收缩空间： 300 * (300 * 1 /  1300 )约等于 69.231

项目2收缩空间： 300 * (500 * 2 /  1300 ) 约等于 230.769

（4）每个项目的实际宽度： 设置的width值 - 项目的收缩空间

项目1宽度： 300 - 69.231= 230.77

项目2宽度： 500 - 230.769 =  269.23

祝学习愉快！

0