微信小程序----Maide List（图文列表）（flex布局实现MUI的图文列表）

效果二维码

效果图

WXML

  图在左边
  
    
    
      {{item.title}}
      {{item.detail}}
    
  


  图在右边
  
    
    
      {{item.title}}
      {{item.detail}}
    
  


  图在左边，右侧箭头
  
    
    
      {{item.title}}
      {{item.detail}}
    
  


  圆角列表
  
    
    
      {{item.title}}
      {{item.detail}}
    
  

WXSS

.tui-gallery-list{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gallery-img{
  width: 150rpx;
  height: 90rpx;
  flex: 0 0 auto;
}
.gallery-box{
  height: 90rpx;
  overflow: hidden;
}
.gallery-name{
  display: block;
  height: 50rpx;
  line-height: 50rpx;
  overflow: hidden;
  font-size: 35rpx;
}
.gallery-detail{
  display: block;
  height: 40rpx;
  line-height: 40rpx;
  overflow: hidden;
  font-size: 30rpx;
  color: #8f8f94;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gallery-left{padding-left: 10px;}
.gallery-right{padding-right: 10px;}

总结

1、使用flex进行布局要注意兼容性，所以采用：display: -webkit-flex;display: flex;
2、为了保证每排三个图标的两对对齐，采用：justify-content: space-between;
3、order的值的大小，决定着该子元素的位置；
4、每个子元素设置flex: 0 0 auto;否则某个子元素超出，会改变其他元素大小！

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表