小程序使用scroll-view横向滚动时盒子压缩问题

小程序scroll-view组件设置了scroll-x="{{true}}" 且内部盒子使用flex布局时会出现以下样式问题：

此时盒子被等比例压缩了而没有进行横向滚动，此时需要给每个子盒子设置以下样式：

flex-shrink:0;
flex-grow:0;

这样就能横向滚动了

 

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的总和小于，这会有部分没有被压缩，会超出父元素进行显示。