这种布局实现的效果是将一组图片以等间距的方式排列在一个网格中。每个图片项具有相同的宽度,并且它们之间有均匀的间距。图片项按照从左到右、从上到下的顺序进行排列,形成一个紧凑的网格布局。每行的图片数量通常是固定的,以便保持整齐的外观。同时,通过去除每行的最后一个图片项的右边距,确保最右侧的图片与容器的边距为0,使整个布局看起来更加对齐和整洁。这种布局适用于展示多张图片,并可用于实现产品展示、相册展示等场景。它可以在不同的屏幕尺寸和设备上自适应,并提供一致的显示效果。
<view class="ask-priceImg">
<view class="item" wx:for="{{businessInfo.user_business_throw[0].delivery_price_file}}"
wx:key="index">
<image class="imgItem" src="{{item.fileUrl}}" mode="" />
</view>
</view>
.ask-priceImg {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 20rpx 0;
/* border: 1px solid yellowgreen; */
}
.ask-priceImg .item {
width: calc(33.33% - 10px);
height: 180rpx;
margin-bottom: 10px;
margin-right: 10px;
}
.ask-priceImg .item:nth-child(3n) {
margin-right: 0;
}
.ask-priceImg .imgItem {
width: 100%;
height: 100%;
}