老师,flex-shrink属性如果一个项目设置的是1,一个项目设置的是2,这样这两个项目会怎么缩小呢

老师,flex-shrink属性如果一个项目设置的是1,一个项目设置的是2,这样这两个项目会怎么缩小呢

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2022-03-17 10:23:49

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

https://img1.sycdn.imooc.com//climg/62329a6d09ca323e06170880.jpg

(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

https://img1.sycdn.imooc.com//climg/62329b83090d7e9716590623.jpg

项目2宽度: 500 - 230.769 =  269.23

https://img1.sycdn.imooc.com//climg/62329b9809664d8f12930476.jpg

祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师