hooyantsing's Blog

P117_17_元素动态缩小的处理技巧

字数统计: 145阅读时长: 1 min
2020/04/16

P117 17 元素动态缩小的处理技巧

flex-shrink

[对弹性元素设置]

对于子元素宽度/高度之和大于弹性容器宽度/高度。

3484c862bd38109ffd6d9f6b18ecd482.png

1
2
//每个元素都不缩小,保持默认宽度
flex-shrink: 0;

分析数字参数的意义

a7e885fad7238f3b9b22023d686afaa6.png

已知弹性容器宽度400px,内部有3个子元素,每个子元素宽度200px。


计算:

3 * 200 - 400 = 200 px

200 / (0 * 200 + 1 * 200 + 3 * 200) = 0.25

I.    200 - 200 * 0.25 * 0 = 200 px

II.   200 - 200 * 0.25 * 1 = 150 px

III.  200 - 200 * 0.25 * 3 = 50   px

结果:

d9f628c26bd69b04cbe7880ad8a6664c.png

CATALOG