2023年6月21日发(作者:)
flex-shrink的计算⽅法今天看到关于flex-shrink的题⽬,发现⾃⼰算的⼀直有问题,所以找到了⼀个回答⽐较清晰的记录⼀下题⽬来源
答案位置⼦元素的 flex-shrink 的值分别为 2,1溢出:500 + 400 - 600 = 300。总权重为 2 * 500 + 1 * 400 = 1400两个元素分别收缩:300 * 2(flex-shrink) * 500(width) / 1400= 214.28300 * 1(flex-shrink) * 400(width) / 1400= 85.72三个元素的最终宽度分别为:500 - 214.28 = 285.72400 - 85.72 = 314.28总结下就是(溢出宽/⾼度 x 当前元素的收缩量 * 当前元素的宽度) / 总权重总权重 = 第⼀个元素的收缩量 * 第⼀个元素的宽/⾼度 + 第⼆个元素的收缩量 * 第⼆个元素的宽/⾼度 + ...
2023年6月21日发(作者:)
flex-shrink的计算⽅法今天看到关于flex-shrink的题⽬,发现⾃⼰算的⼀直有问题,所以找到了⼀个回答⽐较清晰的记录⼀下题⽬来源
答案位置⼦元素的 flex-shrink 的值分别为 2,1溢出:500 + 400 - 600 = 300。总权重为 2 * 500 + 1 * 400 = 1400两个元素分别收缩:300 * 2(flex-shrink) * 500(width) / 1400= 214.28300 * 1(flex-shrink) * 400(width) / 1400= 85.72三个元素的最终宽度分别为:500 - 214.28 = 285.72400 - 85.72 = 314.28总结下就是(溢出宽/⾼度 x 当前元素的收缩量 * 当前元素的宽度) / 总权重总权重 = 第⼀个元素的收缩量 * 第⼀个元素的宽/⾼度 + 第⼆个元素的收缩量 * 第⼆个元素的宽/⾼度 + ...
发布评论