一道关于flex的题
来源：3-12 flex布局-项目的属性
夜魇丶
2020-01-27 17:07:41
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interview</title>
<style>
div{
display: flex;
text-align: center;
width:300px;
}
section:nth-child(1){
background-color: red;
flex:1 1 100px;
}
section:nth-child(2){
background-color: blue;
flex: 2 2 130px;
}
section:nth-child(3){
background-color: pink;
flex: 3 3 150px;
}
</style>
</head>
<body>
<div class='flex'>
<section>1</section>
<section>2</section>
<section>3</section>
</div>
</body>
</html>
外部div容器为flex布局，宽度为300px。容器中有三个子元素section，flex-basis属性分别是100px、130px、150px。容器的溢出空间为80px（100+130+150-300计算得出）。
求每个子元素宽度为多少。
首先我的思路是：
flex-shrink一共为6份。溢出空间为80px。
第一个子元素：felx:1 1 100px；
也就是占1份，六分之一。所以用剩余空间乘六分之一，再用本身项目空间减去。
也就是：100 - 80 * 1/6 = 86.67
第二个子元素同理：130 - 80 * 2/6 = 103.33
第三个子元素同理：150 - 80 * 3/6 = 110
最后三个数相加确实等于300px，感觉算对了…但是看答案不是这样的：
答案是先计算出收缩总和，也就是：
1 * 100 + 2 * 130 + 3 * 150 = 810px
然后通过：
flex-basis - (flex-shirink * flex-basis) / 收缩总和 * 溢出空间
以第一个子元素为例，代入数据：
100 - （1 * 100 / 810） * 80 = 90.12
第二个子元素值为：104.32
第三个子元素值为：105.56
代码执行结果也是这样（以第二个子元素为例）：
1. 没想明白为什么要这么计算，为什么要计算出收缩总和（810px）。
2. 如果flex-shrink:1指的是占收缩总和整体的一份。那为什么flex-grow不是这么计算的？
例如：容器为300px,剩余空间70
第一个子元素：flex: 1 1 50px;
第二个子元素：flex: 1 2 80px;
第三个子元素：flex: 1 3 100px;
那么计算结果以第一个元素为例： 1/6 * 70 + 50 = 61.67
这个计算结果就直接拿剩余空间（70）来使用了，不用（1 * 50 + 2 * 80 + 3 * 100）
3. 另外这个收缩总和我也没明白为什么要这么计算，
flex: 1 1 100px 为什么要1*100？
辛苦老师解答。
1回答
-
同学你好，针对你的问题解答如下：
当子盒子基准值之和超过父盒子的宽度，需要计算出收缩总和，这个是固定的一种计算方式
同学举例中，是子盒子的基准值之和小于父盒子的宽度的计算方式，与你前面说的方式不同，所以与之前的计算方式不同，子盒子的基准值之和小于了父盒子宽度，父盒子还有剩余空间，不需要再计算收缩总和。
可以理解为是固定的用法， 因为flex-shrink 属性定义了项目的缩小比例，当父元素主轴方向空间不足的时候，子元素们按照 flex-shrink 的比例来缩小，所以需要先计算收缩的总和。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题