起因:计算左右两个节点的宽度
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 500px;
background: red;
}
.right {
flex: 2 1 400px;
background: blue;
}
</style>
flex的第一个值:flex-grow,默认是0,就是不占用多出来的空间。所有子节点宽度小于父节点宽度时生效,按比例分摊剩余空间
flex的第二个值:flex-shrink,默认是1(坑skr人),所有子节点的宽度求和超过父节点宽度时生效。
flex的第三个值:flex-basis,如果声明,则会覆盖节点的width属性,flex-basis的优先级更高。如果所有子节点的宽度求和超过父节点宽度,则按照声明的宽度比例缩小填满父节点;但是宽度小于的时候,却不会自动填满
============================================
解释下这个题:
简单来说就是按比例分摊剩余空间,那剩余空间是个啥呢?
再简单解释下就是父节点主轴上的宽度 减去 所有字节点的宽度(可正可负)
问题变的好像容易了很多
父节点宽度600,子节点一共多出来300,按照flex-shrink 是2 : 1,那结果不应该是左右各300平分吗?
太片面了,真这么简单还出啥题?
首先我们很容易就能发现上面算法的问题:上面算法默认左右两边宽度一致,但是实际不是这样,所以我们加上宽度对压缩率的影响
X1:左边压缩率,X2:右边压缩率
X1 = 2X2
300 = 500 * X1 + 400 * X2(为啥是300不是600,因为是针对压缩空间啊)
求解方程,X1 = 3/7,X2 = 3/14(为啥加起来不是1呢?因为是针对字节点自己的宽度压缩啊)
所以左边的宽度:500 * (1 - X1) = 285.7142857142857
所以右边的宽度:400 * (1 - X2) = 314.2857142857143
求和刚好是600