在微信小程序开发过程中，view是最基础的布局容器，相当于html页面标签中的div，其中支持的布局方式有block、flex，在默认的情况下，view的布局方式block，是个块状元素：
<view class='box color1'></view>
<view class='box color2'></view>
<view class='box color3'></view>
效果图：
如果我们需要让这个三个元素一行显示，通常情况下需要把box的display属性更改的为inline-block；
但是在小程序的开发过程中，一般不直接修改display的属性，这个时候我们就用到了flex布局
flex布局
flex是flexible box的缩写，一般叫做弹性盒子或者弹性布局；
关于弹性盒子有两个最基本的概念：一个是flex container，弹性容器；另一个是flex item 这个容器下面的子元素。
如果想要使用flex布局，最起码需要一个container，所谓弹性布局也就是对容器下面的子元素采用flex弹性布局 。
想要使用flex布局，需要先修改一下页面的内容：
<view class='container'>
<view class='box color1'></view>
<view class='box color2'></view>
<view class='box color3'></view>
</view>
并且给容器添加class属性：
.container{
display: flex;
}
在去掉display:inline-block属性之后，给container添加display:flex属性，然后看下页面效果：
发现三个box的块状属性被消除了，现在呈现一行排列。
如果我们现在给box添加一下display:block会出现什么效果呢？
.box{
display: block;
width: 100px;
height: 100px;
}
这个时候发现，虽然给box设置了块状属性，但还是呈现一行排列，因为一旦box位于弹性盒子容器内时，它的块状元素属性的特点就无效了 ，即使指定为block元素它也是无效的。
flex-direction
决定元素的排列方向，有四个值，
row：从左到右的水平方向为主轴（默认值）
row-reverse：从右到左的水平方向为主轴
column：从上到下的垂直方向为主轴
column-reverse：从下到上的垂直方向为主轴
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse
justify-content
控制内容的对齐方式，有以下属性：
flex-start：主轴起点对齐(默认值)。
flex-end：主轴终点对齐。
center：在主轴中居中对齐。
space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等。
space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。
（示例内容：flex-direction: row 主轴：水平方向从左到右；flex-direction: row-reverse 主轴：水平方向从右到左，与示例内容方向相反）
justify-content： flex-start 主轴起点对齐(默认值)
justify-content：flex-end 主轴终点对齐
justify-content ：center在主轴中居中对齐
justify-content：space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
justify-content：space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同
align-items：
在了解align-items之前，要先了解一个概念：主轴和交叉轴，
现在下面的这个例子：
.container{
display: flex;
flex-direction: column;
justify-content:center;
height: 400px;
background: #ccc;
}
效果图：
justify-content:center只能实现主轴（从上到下垂直方向）的中间对齐，如果我们想让容器里面的box即在垂直方向对齐又在水平方向对齐，这个时候就需要用到align-items，它有以下属性：
stretch 填充整个容器(默认值)
flex-start 起点对齐
flex-end 终点对齐
center 居中对齐
baseline 以子元素的第一行文字对齐
align-items:stretch 填充整个容器
（说明：如果想让该属性生效，容器的子元素不能设置固定高度）
align-items:flex-start 起点对齐
align-items:flex-end 终点对齐
align-items:center 居中对齐
align-items:baseline 以子元素的第一行文字对齐
备注：主轴和交叉轴是怎么区分呢？
主轴和交叉轴是根据flex-direction的值确定的，如果是row，则主轴是水平方向，反之是垂直方向
flex-wrap
用于控制子元素是否换行
nowrap：不换行（默认）
wrap：换行
wrap-reverse：换行，第一行在最下面
flex-wrap： nowrap：不换行（默认）
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
height: 400px;
background: #ccc;
}
.box {
width: 150px;
height: 100px;
}
效果图：
容器的宽度为375px，子元素宽度设置为150px；虽然子元素宽度之和大约容器宽度，但是并不会换行。
flex-wrap： wrap 换行
flex-wrap： wrap-reverse 换行，第一行在最下面
