微信小程序----Grid（九宫格）（flex实现九宫格布局）

效果二维码

效果图

WXML

  
    
      
      Home
    
    
      
      Email
    
    
      
      Chat
    
    
      
      location
    
    
      
      search
    
    
      
      phone
    
    
      
      setting
    
    
      
      about
    
    
      
      more
    
  

WXSS

.tui-table-view{
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.tui-col-3{
 flex: 0 0 auto;
  width: 33.33333333%;
  text-align: center;
  color: #797979;
  padding: 40rpx 0;
  font-size: 30rpx;
}

总结

1、使用flex进行布局要注意兼容性，所以采用：display: -webkit-flex;display: flex;
2、为了保证每排三个图标的两对对齐，采用：justify-content: space-between;
3、父元素必须设置flex-wrap: wrap;进行换行，否则会在一排展示；
4、每个子元素的宽度width: 33.33333333%;必须写出，否则会按照其占位大小分配；
5、每个子元素设置flex: 0 0 auto;否则某个子元素超出，会改变其他元素大小！

WXRUI体验二维码

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

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

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

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

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

微信小程序实例列表

前端笔记列表

游戏列表