<view class="intro">
<view class="list">
<view class="grid">1</view>
<view class="grid">2</view>
<view class="grid">3</view>
<view class="grid">4</view>
<view class="grid">5</view>
<view class="grid">6</view>
<view class="grid">7</view>
</view>
</view>
.list {
display: flex;
overflow-x: scroll;
}
.grid {
margin-left: 10rpx;
width: 150rpx;
height: 58rpx;
border: 1rpx solid #e5e5e5;
}
grid 有7个，每个150rpx，按道理屏幕应该展示不了这么多，需要滚动观看，实际上全部展示出来了，只是 grid 宽度没有150rpx这么多，被压缩了。
image.png
这里要用到flex-shrink这个属性，flex-shrink定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。
给 grid 加上 flex-shrink: 0;。
image.png
image.png
这样项目就不会被压缩了。
