在微信小程序开发过程中，view是最基础的布局容器，相当于html页面标签中的div，其中支持的布局方式有block、flex，在默认的情况下，view的布局方式block，是个块状元素：

<view class='box color1'></view>

<view class='box color2'></view>

<view class='box color3'></view>

效果图：

示例1

如果我们需要让这个三个元素一行显示，通常情况下需要把box的display属性更改的为inline-block；

示例2

但是在小程序的开发过程中，一般不直接修改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属性，然后看下页面效果：

示例3

发现三个box的块状属性被消除了，现在呈现一行排列。

如果我们现在给box添加一下display:block会出现什么效果呢？

.box{

    display: block;

    width: 100px;

    height: 100px;

}

示例4

这个时候发现，虽然给box设置了块状属性，但还是呈现一行排列，因为一旦box位于弹性盒子容器内时，它的块状元素属性的特点就无效了 ，即使指定为block元素它也是无效的。

flex-direction

决定元素的排列方向，有四个值，

    row：从左到右的水平方向为主轴（默认值）

    row-reverse：从右到左的水平方向为主轴

    column：从上到下的垂直方向为主轴

    column-reverse：从下到上的垂直方向为主轴

flex-direction: row    

row

flex-direction: row-reverse

row-reverse

flex-direction: column

column

flex-direction: column-reverse

column-reverse

justify-content

    控制内容的对齐方式，有以下属性：

    flex-start：主轴起点对齐(默认值)。

    flex-end：主轴终点对齐。

    center：在主轴中居中对齐。

    space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等。

    space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。

（示例内容：flex-direction: row    主轴：水平方向从左到右；flex-direction: row-reverse 主轴：水平方向从右到左，与示例内容方向相反）

justify-content： flex-start 主轴起点对齐(默认值)

flex-start

justify-content：flex-end 主轴终点对齐

flex-end

justify-content ：center在主轴中居中对齐

center

justify-content：space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等

space-between

justify-content：space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

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-start

    align-items:flex-end 终点对齐

align-items:flex-start

align-items:center 居中对齐

align-items:flex-start

align-items:baseline 以子元素的第一行文字对齐

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;

}

效果图：

flex-wrap： nowrap

容器的宽度为375px，子元素宽度设置为150px；虽然子元素宽度之和大约容器宽度，但是并不会换行。

flex-wrap： wrap 换行

flex-wrap： wrap

flex-wrap： wrap-reverse 换行，第一行在最下面

flex-wrap： wrap-reverse