编写页面是微信小程序乃至前端中最重要的环节之一。如何简单的实现常见的布局排布(水平居中、垂直居中、左对齐、右对齐、等距分布等等)呢？话不多说，开始搞
一、讲一讲display
display 属性规定元素应该生成的框的类型。
我的理解呢，就是布局的显示类型，或者说是布局的显示方式，比如说：display:none; 就表示此元素不显示，以及今天要讲的：display:flex;表示此元素的布局是以弹性布局来展示，Flexible Box的缩写为Flex。那么究竟啥是flex布局呢
二、flex介绍
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
使用flex布局，应该培养的一个概念就是：把布局或者元素当成一个容器，或者说是盒子，元素在盒子里进行各种位置排布
比如上图，元素view1、view2、view3都是在盒子page（它们的父布局）中进行布局排布的
三、使用flex
首先，我们先在小程序中创建一个空页面，然后在index.wxml中写入
<view class='container1'>
<view class='view1'>view1</view>
<view class='view2'>view2</view>
<view class='view3'>view3</view>
</view>
index.wxss
.container1{
width: 100%;
height: 900rpx;
background: #999999;
}
.view1{
height: 200rpx;
background: #E21918
}
.view2{
height: 200rpx;
background: #FFAA25
}
.view3{
height: 200rpx;
background: #1BA160
}
当我们在container布局中不写display时，默认display为block，是块级元素，此时一个元素（子view）占一行，即使子view的宽度没有指定，也是占一行如下图效果
当我们将display设为flex时
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
}
我们发现flex会让块级元素的特性失效，一个元素不会占一行了。
好了，我们发现当display设置为flex，布局盒子默认的样子是子元素左对齐，排成一行。那如果想让子元素竖着排成一列，该怎么实现呢？
我们可以在子元素的父布局设置flex-direction,当我们设置flex-direction:column时，子元素是列排布，设置flex-direction:row时，子元素是行排布，代码以及效果如下
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column
}
当我们用开发工具敲lex-direction:column时，会出现一个代码提示（一定用键盘敲才会出现，复制不会提示）
除了column还有一个column-reverse，那这个column-reverse有何用那？它其实是对子元素进行了倒序排列，代码和效果如下：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column-reverse
}
这时，我们会发现一个问题，顺序是倒序不假，但是view1、view2、view3的位置也变化了，原来是顶部对齐，设置 flex-direction: column-reverse后，变成了底部对齐。
没关系，我们可以通过设置子元素父布局里的justify-content来控制子元素是上对齐还是下对齐（当flex-direction:row时，justify-content控制的时左对齐和右对齐）
当我们把justify-content设置为flex-end时，代码和效果如下
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column-reverse;
justify-content: flex-end
}
我们发现子view也上对齐了，也倒序了。当我们设置justify-content: flex-starts后，就会出现下对其的效果，这里我就不贴图了。
那我们如何实现view1、view2、view3在其父布局盒子中垂直居中显示呢？
我们可以设置justify-content:center，代码和效果如下：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column-reverse;
justify-content: center
}
justify-content还有两个常用的取值：分别是 space-around喝space-between，我们先看一下space-arround的效果：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column;
justify-content: space-around
}
由上图可以看到，space-around的效果是子元素两侧的边距平分了父容器中剩余的宽度，使得子元素两侧的边距均相等。
那我们再看space-between是什么样子展现的：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column;
justify-content: space-between
}
由上图可以看出，space-between实现了等距排布，第一个元素上对齐，最后一个元素下对齐，间距平分。
ok，至此主轴方向常用的布局方式已经介绍完毕，那问题来了，什么是主轴？
flex容器默认存在两个轴，一个主轴，一个交叉轴，随是主轴是由flex-direction决定的，flex-direction为row的时候，横向是主轴，纵向是交叉轴；flex-direction为column的时候，纵向为主轴，横向为交叉轴。
那么，交叉轴方向的常用布局有哪些，通过什么来设置呢？
可以通过align-items来设置交叉轴方向的布局，以下讲一下它几个常用的取值
center、flex-start、flex-end和baseline
center、flex-start、flex-end这几个取值上面都说过，来举一个例子看一下justify-content和align-item同时使用的效果：
水平垂直居中效果：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: column;
justify-content:center;
align-items: center
}
justify-content和align-items的组合还有好多种，这里就不举例子了，但是值得注意的是：align-items没有space-between和space-around。
最后说以下align-items的baseline的用法，先看wxss，注意看view1、view2和view3的font-size：
.container1{
width: 100%;
height: 900rpx;
background: #999999;
display: flex;
flex-direction: row;
justify-content:center;
align-items: baseline
}
.view1{
height: 200rpx;
font-size: 20rpx;
background: #E21918
}
.view2{
height: 200rpx;
font-size: 30rpx;
background: #FFAA25
}
.view3{
height: 200rpx;
font-size: 60rpx;
background: #1BA160
}
我们可以看出，view1、view2、view3文字大小不同，但是文字底部对齐了。所以，baseline的作用就是：使view内的每个子元素的文字底部对齐。
四、总结
以上内容主要是简单的介绍了以下对flex布局的一些理解，以及flex的常见用法，熟练掌握这些用法后，可以编写大部分常见的微信小程序页面。以上内容可能会有遗漏，我会在以后进行更新完善。