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

效果二维码

效果图

WXML

<view class="section"><view class="tui-table-view"><view class="tui-col-3"><icon class="iconfont icon-shouye"></icon><view>Home</view></view><view class="tui-col-3"><icon class="iconfont icon-xinfeng"></icon><view>Email</view></view><view class="tui-col-3"><icon class="iconfont icon-duihuaxinxi"></icon><view>Chat</view></view><view class="tui-col-3"><icon class="iconfont icon-dibiao"></icon><view>location</view></view><view class="tui-col-3"><icon type="search" size='30'></icon><view>search</view></view><view class="tui-col-3"><icon class="iconfont icon-dianhua"></icon><view>phone</view></view><view class="tui-col-3"><icon class="iconfont icon-shezhi"></icon><view>setting</view></view><view class="tui-col-3"><icon type="info" size='30' color='#797979'></icon><view>about</view></view><view class="tui-col-3"><icon class="iconfont icon-gengduotianchong"></icon><view>more</view></view></view>
</view>

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项目地址

微信小程序实例列表

前端笔记列表

游戏列表

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

微信小程序中通过flex实现网格布局(一)
这篇文章主要是通过flex布局实现网格布局. 准备知识: 数组的undefined的问题一般来说,网格布局是特殊的列表,后台返回的数据是一维数组.而我们通常使用wx:for的方式将数据填充进去.数据 ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员定义布局:display:flex flex容器的属性: 一.flex-direction: ...
微信小程序学习笔记④——Flex布局[实战样例之画骰子]
✅ 关于 Flex,很多优秀的前辈已经总结过了,比如:阮一峰的<Flex 布局教程:语法篇>.知乎林东洲的<30 分钟学会 Flex 布局>等等.他们主要是基于网页的,小辈斗胆 ...
微信小程序开发之——flex布局
打开微信小程序开发工具,新建Hello word项目,删除掉无用的代码. flex-direction flex-direction属性表示布局的方向有两个值: row | column 默认属性是 ...
微信小程序使用三元运算符动态渲染布局
今天在写微信小程序时,被坑到了, <!--.wxml-> <view class="row-in {{to_top ? 'to-top' : 'to-bottom'}}&q ...
微信小程序7__一行3 列的布局
要实现以下效果: 在index.wxml中增加以下布局代码 <view class="w ...
微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
image 微信小程序flex_微信小程序进阶－flex布局
对于一个后端程序员来说最麻烦的就是布局了,今天就介绍下小程序的布局,介绍一种高效的小程序布局方案.笔者之前也做过native app的布局,对比下来,小程序的布局没有native那么灵活,毕竟goog ...
微信小程序实现首页图片多种排版布局!
先来个效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: <view class='in ...