Css 填充框和边框框中的弹性收缩系数如何？

假设我们有一个宽度为400px的flex容器

此容器内有三个弹性项：

:nth-child(1) { flex: 0 2 300px; }   /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }

因此flex项目的总宽度为600px，容器中的可用空间为-200px

在和的帮助下，我学习了在flex项之间分配负自由空间的基本公式：

:nth-child(1) { flex: 0 2 300px; }   /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }

步骤1

将每个收缩值乘以其基础，然后将它们相加：

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

总数=1000

步骤2

将上述各项除以总和，以确定收缩系数：

步骤3

将收缩系数乘以负自由空间，以确定从每个项目中移除的空间：

:nth-child(1)  .6 * -200px = -120px
:nth-child(2)  .2 * -200px =  -40px
:nth-child(3)  .2 * -200px =  -40px

因此，每个弹性项目的计算大小应为：

:nth-child(1)  300px - 120px = 180px
:nth-child(2)  200px -  40px = 160px
:nth-child(3)  100px -  40px =  60px

在Chrome、Firefox和IE11上进行了测试，这些数字得到了验证。这个计算非常有效

.flex{
显示器：flex；
宽度：400px；
高度：50px；
保证金：0；
填充：0；
列表样式：无；
文本对齐：居中；
}
.flex li:第n个孩子（1）{
flex:02300px；
背景：橙色；
}
.flex li:第n个孩子（2）{
flex:011200px；
背景：黄绿色；
}
.flex li:第n个孩子（3）{
flex:02100px；
背景：水；
}

180像素
160像素
60像素

将其定义为

对于线上的每个未冻结项目，乘以其弹性收缩系数 通过其内部，并注意这是其缩放的弯曲 收缩系数。求项目与所有项目之和的比率 线上未冻结的物品。将项目的属性设置为 它减去绝对值的一小部分 与比例成比例

简化、冻结的弹性物品是那些不能或不必再弯曲的物品。我将假设没有

min width

限制和非零弯曲收缩系数。通过这种方式，所有flex项最初都被解冻，并且它们在flex循环的一次迭代后都被冻结

内部flex基本大小取决于的值，由CSS2UI定义为

• 内容框

  ：指定的宽度和高度（以及相应的最小/最大属性）分别应用于 元素的内容框。元素的填充和边框是 在规定的宽度和高度之外进行布局和绘制

• 边框框

  ：此元素上宽度和高度的长度和百分比值（以及相应的最小/最大属性）决定 元素的边框框。即，在上指定的任何填充或边框 元素在指定的范围内进行布局和绘制 和。内容宽度和高度由以下公式计算： 从中减去各边的边框和填充宽度 指定的宽度和高度属性。[…]使用的值，如 例如通过getComputedStyle（）公开，也请参阅 边框框

基本上，这意味着尺寸（宽度、柔性底座）有一个内部变量和一个外部变量。内部尺寸仅包括内容，外部尺寸还包括填充物和边框宽度。样式表中指定的长度将用作

框大小：内容框

的内部大小，或者用作

框大小：边框框

的外部大小。另一个可以通过添加或减去边框和填充宽度来计算

忽略很多细节，算法将类似于

让sumScaledShrinkFactors=0，
remainingFreeSpace=flexContainer.innerMainSize；
用于（弹性项的项目）{
remainingFreeSpace-=item.outerFlexBasis；
item.scaledShrinkFactor=item.innerFlexBasis*item.flexShrinkFactor；
SumScaledShrinkFactor+=项。scaledShrinkFactor；
}
用于（弹性项的项目）{
let ratio=item.scaledShrinkFactor/sumscaledShrinkFactor；
item.innerWidth=item.innerFlexBasis+比率*剩余空闲空间；
}

没有衬垫，就像你解释的那样

                                   (width)
                                   innerW │ padd │ outerW
                                   ───────┼──────┼───────
300px * (1 + 2 / 1000px * -200px) = 180px │  0px │  180px
200px * (1 + 1 / 1000px * -200px) = 160px │  0px │  160px
100px * (1 + 2 / 1000px * -200px) =  60px │  0px │   60px
                                   ───────┼──────┼───────
                                    400px │  0px │  400px

使用

10px

水平填充，可用空间减少了

3*2*10px=60px

，因此现在是

-260px

                                   (width)
                                   innerW │ padd │ outerW
                                   ───────┼──────┼───────
300px * (1 + 2 / 1000px * -260px) = 144px │ 20px │  164px
200px * (1 + 1 / 1000px * -260px) = 148px │ 20px │  168px
100px * (1 + 2 / 1000px * -260px) =  48px │ 20px │   68px
                                   ───────┼──────┼───────
                                    340px │ 60px │  400px

使用

box size:border box

时，指定的柔性底座是外部底座，因此从中减去衬垫以计算内部底座，即

280px

，

180px

，

80px

。然后，缩放的弯曲收缩系数之和变为

2*280px+180px+2*80px=900px

。可用空间与无填充的情况类似，因为外部柔性底座是相同的。请注意，

getComputedStyle

检索到的

width

现在将是外部的，因此填充将添加回末尾

                                                    (width)
                                    innerW │ padd │  outerW
                                   ────────┼──────┼────────
280px * (1 + 2 / 900px * -200px) ≈ 155.6px │ 20px │ 175.6px
180px * (1 + 1 / 900px * -200px) = 140.0px │ 20px │ 160.0px
 80px * (1 + 2 / 900px * -200px) ≈  44.4px │ 20px │  64.4px
                                   ────────┼──────┼────────
                                   340.0px │ 60px │ 400.0px

定义为

对于线上的每个未冻结项目，乘以其弹性收缩系数 通过其内部，并注意这是其缩放的弯曲 收缩系数。求项目与所有项目之和的比率 线上未冻结的物品。将项目的属性设置为 它减去绝对值的一小部分 与比例成比例

简化、冻结的弹性物品是那些不能或不必再弯曲的物品。我将假设没有

min width

限制和非零弯曲收缩系数。通过这种方式，所有flex项最初都被解冻，并且它们在flex循环的一次迭代后都被冻结

内部flex基本大小取决于的值，由CSS2UI定义为

• 内容框

  ：指定的宽度和高度（以及相应的最小/最大属性）分别应用于 元素的内容框。元素的填充和边框是 在规定的宽度和高度之外进行布局和绘制

• 边框框

  ：此元素上宽度和高度的长度和百分比值（以及相应的最小/最大属性）决定 t形边框盒

  280px * (1 + 2 / 900px * -200px) + 20px = 175.5px
  180px * (1 + 1 / 900px * -200px) + 20px = 160px
   80px * (1 + 2 / 900px * -200px) + 20px = 64.4px