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中文网！
