微信小程序开发系列（五）Flex布局的详解

工具库

本文介绍微信小程序开发系列（五）Flex布局的详解

1：Flex布局

Flex布局如图1所示

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

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

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

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

编译运行如图2所示

注：上述代码中在container1容器中加入了4个子元素view(item1)，item1的样式文件中设置每个item1的宽高为固定值：100rpx，rpx为与屏幕尺寸相关缩放的单位，不同于固定的px，每个item1的边为1px，实线（soliod）,白色（#fff）

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

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

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

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}

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}

以上就是微信小程序开发系列（五）Flex布局的详解的详细内容，更多请关注第一PHP社区其它相关文章！