请稍等 ...

多个盒子，flex-shrink以为值的时候，该如何计算呢？

Document

怒焰狂暴 2021-08-15 15:55:54

源自：4-11 flex-shrink收缩比例

891

收起

提交取消

2回答

西门老舅 2021-08-15 20:15:24

同学你好，这个收缩比例如果是小数，也是按照我视频中说的方式进行换算。

具体以你给的代码进行换算如下：

溢出部分大小 -> 300 + 400 - 500 -> 200
由于一个占0.3，一个占0.5，因此不能完全收缩，收缩的部分为溢出大小即上面的200 * (0.3 + 0.5) -> 160
因此有200 - 160 > 40 个像素会溢出盒子
现在来观察两个子项的比例，400 是 0. 3 ， 300 是 0.5 ，所以根据视频中的换算比例为 1200 比 1500 ，及12 : 15
第一个子项的最终宽度为：400 - 12/27 * 160 -> 328.8888888888889
第二个子项的最终宽度为：300 - 15/27 * 160 -> 211.11111111111111

祝您学习愉快~

0 回复有任何疑惑可以回复我~

收起回答

提问者怒焰狂暴 #1

如果一个值为小数，另外一个值为整数的时候，又该如何计算呢？

回复有任何疑惑可以回复我~ 2021-08-15 21:07:40

提问者怒焰狂暴 #2
```
比例的问题有些混乱
```
回复有任何疑惑可以回复我~ 2021-08-15 21:08:05

西门老舅回复提问者怒焰狂暴 #3

其实还好，首先记住累加大于等于1就不会有溢出空间，即完全收缩，这样就可以知道收缩的总和大小是多少啦。
下面就是按比例进行分配收缩总和的大小。比如你说的小数和1，该多少就多少，假设0.5和1那就是1:2，还有考虑他们的大小，所以比例是由收缩和宽这两个值共同决定的，具体算法我的回复已经阐述过了。

回复有任何疑惑可以回复我~ 2021-08-15 21:22:44

点开查看后面3条评论

提问者怒焰狂暴 2021-08-15 15:57:46

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.main{

width:500px;

height:500px;

background:skyblue;

display:flex;

}

.main div:nth-child(1){

width:400px;

height:100px;

background:tomato;

flex-shrink:0.3;

}

.main div:nth-child(2){

width:300px;

height:100px;

background:tomato;

flex-shrink:0.5;

}

</style>

</head>

<body>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

相似问题

bootstrap5中网络与flex

计算属性和watch 的疑问

基本计算器 II问题

flex:1 实现布局的自动填充的一点疑惑

比特币中算的哈希值需要跟目标值比较。那么目标值是谁给定的呢？

登录后可查看更多问答，登录/注册

最新升级--前端内功修炼 5大主流布局系统进阶

参与学习 748 人
提交作业 571 份
解答问题 231 个

前端内功修炼：5大主流布局系统进阶

了解课程

本课精华内容

问答作业