<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冲呢，按道理屏幕應(yīng)該展示不了這么多舍败，需要滾動觀看，實際上全部展示出來了敬拓，只是 grid 寬度沒有150rpx這么多邻薯，被壓縮了。
image.png
這里要用到flex-shrink這個屬性乘凸，flex-shrink定義了項目的縮小比例厕诡，默認(rèn)為1，即如果空間不足营勤，該項目將縮小灵嫌。
flex 元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值冀偶。
如果所有項目的 flex-shrink 屬性都為1醒第，當(dāng)空間不足時，都將等比例縮小进鸠。如果一個項目的 flex-shrink 屬性為0稠曼，其他項目都為1，則空間不足時客年，前者不縮小霞幅。
給 grid 加上 flex-shrink: 0;。
image.png
image.png
這樣項目就不會被壓縮了量瓜。
