微信小程序开发详细介绍

Flex布局如图1所示

图1

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

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

在layout.wxml中加入如下代码：

1



2



3



4

在layout.wxss中加入如下代码：

.container1{
    height: 100%;
    width:100%;
    
}


.item1{
    height:100rpx;
    width:100rpx;
    background-color:cyan;
    border: 1px solid #fff
}

编译运行如图2所示

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

.container1{
    height: 100%;
    width:100%;
    
    display:flex;
}

1.1.5容器属性：align-items

上面已经很详细讲解主轴上的对齐方式，这里关于这个交叉轴上的对齐方式同理很简单，就不详细展开了。

1.2.1 容器内元素属性：flex-grow

layout.wxml中修改代码如下：增加i3

3

layout.wxss中修改代码如下：在item1中增加： flex-grow: 1，增加i3，表示在一行中如果有剩余空间的话，i3之外的子view占1份空间，而i3子view占2份空间，编译运行效果如图10所示：可以看出i3view所占据的空间比其余3个子view大，但是没有到2倍

.item1{
    height:100rpx;
    width:100rpx;
    
    border: 1px solid #fff;
    flex-grow: 1
}

.i3{
    flex-grow: 2
}

1.2.2容器内元素属性：flex-shrink

layout.wxml再增加4个子view

layout.wxss中修改代码如下：i3的flex-shrink为0，其余子view为1，这表示当空间不足时所有子view都等比缩小，但是i3的view保持大小不变，编译运行，效果如图11所示

.item1{
    height:100rpx;
    width:100rpx;
    
    border: 1px solid #fff;
    flex-shrink: 1
}


.i3{
    flex-shrink: 0
}

更多微信小程序开发详细介绍相关文章请关注PHP中文网！