flex-grow 与flex-shink

flex-grow

• flex-grow的作用是灵活的分配父元素的剩余空间给子元素，强调的是父元素的剩余空间
• 每个子元素默认的flex-grow为0，及不划分剩余空间
• 所有子元素的flex-grow的总和表示把父元素的剩余空间分为多少份
• 每个子元素的flex-grow的值：又表示占父元素剩余空间的几份
• 如果flex-grow的值为小数，就是表示占剩余空间的百分比，如果小数小于1，就会有剩余空间没有被分配，会留白。

flex-shink

• flex-shink：表示超出父元素宽高的部分按照特定比例进行压缩（在子元素宽高总和大于父元素）
• flex-shink：0 代表不允许压缩；
• flex-shink：1代表合理压缩
• flex-shink 如果为小数代表该子元素需要被压缩，且压缩的部分占超出的部分的百分比，如果所有子元素flex-shink的总和小于，这会有部分没有被压缩，会超出父元素进行显示。

比如现在有一个父元素宽度为500
三个子元素，一个宽100px,一个宽200px，一个宽300px，现在每个子元素的flex-shink都为默认值1
那么现在超出100px，需要每个子元素按照特定的比例压缩自身宽度、

那么 加权总和(flex-shink的值x每个子元素的宽度) = 100x1+200x1+300x1
压缩率 = （每个子元素的flex-shink x 宽度）/ 加权总和
压缩值 = 压缩率 x 子元素自身宽度