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