弹性盒中的缩放机制是怎样的？

弹性盒中的项目设置flex-grow属性定义项目的放大比例，默认值为0，值越大，放大越厉害，且不支持负值；

而flex-shrink属性定义项目的缩小比例，默认值为1，数值越大，缩小越厉害，同样不支持负值；

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。他的默认值为auto，也就是项目的本来大小。

注意：它可以设为跟width或height属性一样的值，比如给具体的像素值，则项目将占据固定空间。

例如
弹性盒子是基于总宽度减去子元素本身占据的宽度, 剩下的宽度, 按照弹性盒子的比例去分配, 比如总宽度是1440, 子元素占据的宽度2003=600 所以可以弹性的宽度是1440-2003=840,
剩下的宽度分成4份, 840/4=210, 所以第一个div: 200+210=410, 第二个div: 200+210*2=620 第三个div和第一个一样200+210=410

详细css弹性盒子布局，请看该链接: css3 flex弹性盒子布局梳理