正在回答 回答被采纳积分+1
1回答
好帮手慕慕子
2022-03-17 10:23:49
同学你好,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

祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星