微信小程序table布局怎么开发?

　　微信小程序table布局怎么开发?今天小编来和大家分享微信小程序table布局开发的内容，有兴趣的微信小程序开发者们可以跟着小编来往下了解哦，以下微信小程序table布局相关内容供大家参考。

　　微信小程序table布局怎么开发?

　　微信小程序table布局如图所示

　　微信小程序table容器属*

　　微信小程序table容器内元素属*

　　align如果定义会覆写掉容器属*中的justify-content，align-items设置的属*

　　微信小程序开发工程中，新建文件layout，然后新建各种文件(以layout命名)，

　　在layout.wxss中加入如下微信小程序代码：

　　.container1{

　　height: 100%;

　　width:100%;

　　background-color:beige;

　　}

　　.item1{

　　height:100rpx;

　　width:100rpx;

　　background-color:cyan;

　　border: 1px solid #fff

　　}

　　以上的微信小程序代码加入了4个子元素哦，而且item1的微信小程序样式文件中已经固定了宽高值。 

具体是数值是：100rpx，rpx为与屏幕尺寸相关缩放的单位，不同于固定的px，每个item1的边为1px，实线(soliod),白色(#fff)

　　修改.container1如下：(增加display:flex;)编译运行如图3所示：可以看出flex布局为默认横向排列元素

　　.container1{

　　height: 100%;

　　width:100%;

　　background-color:beige;

　　display:flex;

　　}

　　然后在item1中增加flex-grow，主要是表示在一行中如果有剩余空间的话，i3之外的子view占1份空间，而i3子view占2份空间，可以看出i3view所占据的空间比其余3个子view大，但是没有到2倍

　　.item1{

　　height:100rpx;

　　width:100rpx;

　　background-color:cyan;

　　border: 1px solid #fff;

　　flex-grow: 1

　　}

　　.i3{

　　flex-grow: 2

　　}

微信小程序代码如下：

　　.table {

　　border: 0px solid darkgray;

　　}

　　.tr {

　　display: flex;

　　width: 100%;

　　justify-content: center;

　　height: 3rem;

　　align-items: center;

　　}

　　.td {

　　width:40%;

　　justify-content: center;

　　text-align: center;

　　}

　　.bg-w{

　　background: snow;

　　}

　　.bg-g{

　　background: #E6F3F9;

　　}

　　.th {

　　width: 40%;

　　justify-content: center;

　　background: #3366FF;

　　color: #fff;

　　display: flex;

　　height: 3rem;

　　align-items: center;

　　}

　　微信小程序table布局怎么开发?以上就是微信小程序table布局怎么开发的全部内容了哦，感谢各位看官们的支持，希望小编整理的内容会对大家有所帮助哦。大家请多多关注微小乔哦。

　　更多阅读：

　　微信小程序如何被“社交名片”利用?

　　微信小程序码怎么弄?微信小程序码怎么生成?

　 编辑我的微信小程序名片怎么弄?