在对小程序开发时我们会进行页面的布局。这里我们简单的介绍下flex布局的使用

1、这里这我们新创建一个文件件

接下来我们在app.json中进行引入，方便起见我们把当前新建的目录指向底部导航中去在app.json中找到pages 添加"pages/module/module"

"pages" :[

"pages/index/index" ,

"pages/logs/logs" ,

"pages/test/test" ,

"pages/nav/nav" ,

"pages/module/module"

],

"tabBar" : {

"color" : "#ccc" ,

"selectedColor" : "green" ,

"list" : [

{

"pagePath" : "pages/index/index" ,

"text" : "首页" ,

"iconPath" : "images/usbox.png" ,

"selectedIconPath" : "images/usbox-actived.png"

},

{

"pagePath" : "pages/test/test" ,

"text" : "测试页面" ,

"iconPath" : "images/featured.png" ,

"selectedIconPath" : "images/featured-actived.png"

},

{

"pagePath": "pages/module/module",

"text" : "flx建模" ,

"iconPath" : "images/search.png" ,

"selectedIconPath" : "images/search-actived.png"

}

]

},

接下来我们在module.wxml中:

< view class= 'flex-wrap' >

< view class= 'a' >a </ view >

< view class= 'b' >b </ view >

< view class= 'c' >c </ view >

</ view >

创建一个view，里面包含abc三个view文件。我们想实现类似：

效果

我们在wxss中首先给view父级标签设置成弹性模型

.flex-wrap{

display:-webkit-flex;

}

给所有view设置下宽高

.flex-wrap view {

width: 200 rpx ;

height: 200 rpx ;

text-align: center ;

font-size: 40 rpx ;

line-height: 200 rpx ;

color: wheat ;

}

效果：

接下来我们给abc设置下背景颜色

.a {

flex: 1 ;

background-color: green ;

}

.b {

flex: 1 ;

background-color: red ;

}

.c {

flex: 1 ;

background-color: blue ;

}

效果:

在这里为什么使用rpx，这里不细说，大家可以看文档介绍比较全面

如果我们把c flex改成2

b占当前的 2/4，这样方便我们不需要计算任何的适配，值这里面flex已经帮我们计算好了

。我们如果想把当前view纵向排列 只需要在父级中增加一个属性即可

flex-direction: column ;

height: 1000 rpx ;