微信小程序图----图片排列展示

下面是我们需要实现内容的效果图

 下面开始布置页面结构

<view class="content-info-list">
<view class="list-title">推荐歌曲</view>
    <view class="list-inner">
        <view class="list-item">
            <image src="/pages/images/test.png" /> <view>紫罗兰</view>
        </view>
        <view class="list-item">
            <image src="/pages/images/1.png" /> <view>五月之歌</view>
        </view>
        <view class="list-item">
            <image src="/pages/images/2.png" /> <view>菩提树</view>
        </view>
        <view class="list-item">
            <image src="/pages/images/2.png" /> <view>欢乐颂</view>
        </view>
        <view class="list-item">
            <image src="/pages/images/1.png" /> <view>安魂曲</view>
        </view>
        <view class="list-item">
            <image src="/pages/images/test.png" /> <view>摇篮曲</view>
        </view>
      </view>
</view>

下面设置样式

.content-info-list{
  font-size: 11pt;
  margin-bottom: 20rpx;
}
.content-info-list > .list-title{
  margin: 20rpx 35rpx;
}
.content-info-list > .list-inner{
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.content-info-list> .list-inner >.list-item{
  flex: 1;
}
.content-info-list > .list-inner > .list-item > image{
  display: block;
  width: 200rpx;
  height: 200rpx;
  margin: 0 auto ;
  border-radius: 10rpx;
  border: 1rpx solid #555;
}
.content-info-list .list-inner >.list-item > view{
  width: 200rpx;
  margin: 10rpx auto;
  font-size: 10pt;
}

　　在上面使用flex-wrap: wrap;指定元素多行显示，详情可查看flex-wrap - CSS：层叠样式表 |MDN的 (mozilla.org)

　　使用display:block;设置图片为块元素