flex-shrink属性 : 并非严格等比缩小,它还会考虑弹性元素的大小
例:
dom结构如下, 已知 container 元素是flex布局,container的宽为600px, first-child的宽为500px, last-child的宽为400px, 给first-child增加flex-shrink:1, last-child增加flex-shrink:2。求first-child和last-child的宽,并描述解答思路。
答: 剩余宽度: -300px
缩小因子分母:1500+2400=1300
元素1的缩小因子: 1500/1300
元素1的缩小宽度为缩小因子乘于容器剩余宽度:1500/1300 * (-300) =-115.38
元素1最后缩小为 500+(-115.38) = 384.62
代码实现:
flex布局其他属性参考链接
https://www.cnblogs.com/itjeff/p/11760112.html
flex布局
最新推荐文章于 2023-06-16 14:25:52 发布