接下来的第三个flex项目的flex-grow值非零0.1。这可能是合理的，并且我还读到一条建议，认为它应该占用所有额外空间的100％，因为其他flex项目为0，并且不能增长。这是0.1甚至0.1 / 0.1是100％（作为比率）。但是，实际上在Chrome和Firefox上仅占用了10％的额外空间。为什么以及应该如何表现？
#container {
display: flex;
border: 1px dashed blue
}
#container div {
border: 1px dashed orange
}
#container div:last-child {
flex-grow: 0.1;
background: #ccc
}<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>但是，实际上在Chrome和Firefox上仅占用了10％的额外空间。
这是正确的行为。
找到该项目的弹性增长因子与该行上所有未冻结项目的弹性增长因子之和的比率。将项目的目标主要尺寸设置为其柔韧性基准尺寸，再加上与比例成比例的剩余可用空间的一小部分。弹性框参考
根据以上内容，该flex-grow值有效地指示了可用空间的百分比，并flex-grow: 1表示可用空间的100％。另外，flex-grow通过这样的式子求出相加后的大小。
弹性物料的基本尺寸+（剩余可用空间*（弹性物料的弹性系数/未冻结的弹性物料的弹性系数））
如果您flex-grow在问题的上下文中指定0.1 ，则剩余可用空间将是初始可用空间的0.1倍：
如果未冻结的弹性项目的弹性因子之和小于1，则将初始可用空间乘以该总和。如果该值的大小小于剩余可用空间的大小，请将该值用作剩余可用空间。弹性框参考
因此，使用上面的公式，可以按以下方式得出第三个弹性项目的大小：
flex项目的基本大小+（初始可用空间* 0.1 *（0.1 / 0.1））
=弹性项目的基本大小+（初始可用空间* 0.1）
因此，结果flex-grow: 0.1是初始剩余可用空间的10％。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句