flex 布局中固定宽度不起作用，被压缩了

<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

这样项目就不会被压缩了。