关于flex中 flex-grow 和flex-shrik

flex-grow 的计算

　　　　　　1.flex-grow和大于1

　　　　　　　　　　父元素宽度 500px，三个子元素的 width 分别为 100px，150px，100px。

　　　　　　　　　　于是剩余空间为 150px

　　　　　　　　　　三个元素的 flex-grow 分别是 1，2，3，于是 sum 为 6
　　　　　　　　　　则三个元素所得到的多余空间分别是：

• • • •  　　　　　　        150 * 1 / 6 = 25px
      • 　　　　　　　 　150 * 2 / 6 = 50px
        • 　　　　　　150 * 3 / 6 = 75px

　　　　　　　　　　　　三个元素最终的宽度分别为 125px，200px，175px。

• • • • 　　　　　　100px + 25px = 125px
      • 　　　　　　150px + 50px = 200px
      • 　　　　　　100px + 75px = 175px

                  1.flex-grow和小于1

　　　　　　　　还是上面一个例子，但是三个元素的 flex-grow 分别是 0.1，0.2，0.3，那么计算公式将变成下面这样：

• • • • 　　　　　　150 * 0.1 / 1 = 15px
      • 　　　　　　150 * 0.2 / 1 = 30px
      • 　　　　　　150 * 0.3 / 1 = 45px

1　　　　　　　　150px - 15px - 30px - 45px = 60px，即还有 60px 没有分配给任何子元素。
　　　　　　　　　　三个元素的最终宽度分别为：

• • • • 　　　　　　100px + 15px = 115px
      • 　　　　　　150px + 30px = 180px
      • 　　　　　　100px + 45px = 145px

 

flex-shrink 的计算

flex-shrink大于1

　　　　　　　　父元素 500px。三个子元素分别设置为 150px，200px，300px。

　　　　　　　　三个子元素的 flex-shrink 的值分别为 1，2，3。

　　　　　　　　　　子元素溢出：150 + 200 + 300 - 500 = -150px。

　　　　　　　　　　那这 -150px 将由三个元素的分别收缩一定的量来弥补。

　　　　　　　　　　具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。

　　　　　　　　　　所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450

　　　　　　　　三个元素分别收缩：

• • • • 　　　　　　150 * 1(flex-shrink) * 150(width) / 1450 = -15.5
      • 　　　　　　150 * 2(flex-shrink) * 200(width) / 1450 = -41.4
      • 　　　　　　150 * 3(flex-shrink) * 300(width) / 1450 = -93.1

　　　　　　　　三个元素的最终宽度分别为：

• • • • • • • • 150 - 15.5 = 134.5
            • 　　　200 - 41.4 = 158.6
            •   　　　300 - 93.1 = 206.9

　　　　　　　　同样，当所有元素的 flex-shrink 之和小于 1 时，计算方式也会有所不同：

　　　　　　此时，并不会收缩所有的空间，而只会收缩 flex-shrink 之和相对于 1 的比例的空间。

flex-shrink小于1

　　　　　　　　　　　　还是上面的例子，但是 flex-shrink 分别改为 0.1，0.2，0.3。

　　　　　　　　　　于是总权重为 145（正好缩小 10 倍，略去计算公式）。

　　　　　　　　　　三个元素收缩总和并不是 150px，而是只会收缩 150px 的 (0.1 + 0.2 + 0.3) / 1 即 60% 的空间：90px。

　　　　　　　　每个元素收缩的空间为：

• • • • 　　　　　　90 * 0.1(flex-shrink) * 150(width) / 145 = 9.31
      • 　　　　　　90 * 0.2(flex-shrink) * 200(width) / 145 = 24.83
      • 　　　　　　90 * 0.3(flex-shrink) * 300(width) / 145 = 55.86

　　　　　　　　　　三个元素的最终宽度分别为：

• • • 　　　　150 - 9.31 = 140.69
    • 　　　　200 - 24.83 = 175.17
      • 　300 - 55.86 = 244.14

 

 

 

 

flex-grow ：工资     flex-grow越大子元素宽度越大

用于父元素盒子大于子元素盒子    a=(父元素盒子宽度)-(子元素盒子宽度相加)

      1.  当子元素设置的flex-grow相加大于1时

                 　　 如父元素有三个 子元素设置 flex-grow 分别为 1 2 3

           　　　   子元素长度为  ：   （子元素盒子宽度/a )*（对应的flex-grow）+(子元素盒子宽度)

     2. 当子元素设置的flex-gow相加小于1时

                        如父元素有三个 子元素设置 flex-grow 分别为 0.1 0.2 0.3

                        子元素长度为  ：  [（ a*（各子元素flex-grow相加）]   *（对应子元素的flex-grow））+（子元素盒子宽度）

flex-shrik：亏损   flex-shrik越大亏损的越多 子元素越小

     用于父元素盒子小于子元素盒子    b=（子元素盒子宽度相加) - (父元素盒子宽度)

            1.  当子元素设置的flex-shrik相加大于1时

   　　　　       如父元素有三个 子元素设置 flex-shrik 分别为 1 2 3

                        子元素宽度    （子元素盒子宽度）-（子元素宽度)  /  [ ∑(子元素的宽度*对应子元素的flex-shrik) ] *[b *(对应子元素的flex-shrik)]

             2.  当子元素设置的flex-shrik相加大于1时

   　　　　       如父元素有三个 子元素设置 flex-shrik 分别为 0.1  0. 2  0. 3

                         子元素的宽度  （子元素盒子宽度）-   （子元素宽度)  / [ ∑(子元素的宽度*对应子元素的flex-shrik) ]  *  [b *（各子元素flex-grow相加） *  (对应子元素的flex-shrik)]

                                                                                                                            该子元素权重