微信小程序 view ：flex布局
布局 样式
<view class="main">
<view class="view view1">1</view>
<view class="view view2">2</view>
<view class="view view3">3</view>
</view>
class 样式
.main {
width: 100%;
background-color: antiquewhite;
}
.view {
height: 200rpx;
width: 200rpx;
}
.view1 {
background-color: red;
}
.view2 {
background-color: dodgerblue;
}
.view3 {
background-color: greenyellow;
}
row：从左到右的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column：从上到下的垂直方向为主轴
column-reverse：从下到上的垂直方向为主轴
justify-content: flex-end; ：主轴结束点对齐
flex-start：主轴起点对齐(默认值)
center：在主轴中居中对齐
space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同
设置元素在纵向上的布局方向，需要设置 align-items 属性，它有5个值可选：
stretch 填充整个容器(默认值)
flex-start 侧轴的起点对齐 （重新设置每个 view 的高度）
flex-end 侧轴的终点对齐
enter 在侧轴中居中对齐
baseline 以子元素的第一行文字对齐
子 View 还有个属性 align-self，可以覆盖父元素的 align-items 属性，它有6个值可选：auto | flex-start | flex-end | center | baseline | stretch （auto 为继承父元素 align-items 属性，其他和 align-items 一致）
比如上面最后一个 baseline 的例子，我们把 view3 设置 align-self:flex-end;
就成了这个样子：
此外还有 flex-wrap 属性，用于控制子 View 是否换行，有3个值可选：
nowrap：不换行（默认）
wrap：换行
wrap-reverse：换行，第一行在最下面
还有子 View 有个 order 属性，可以控制子元素的排列顺序，默认为0。
比如还是上面那个例子，我们把 item3 设置 order:-1; 可以把 view3 排在前面
负值越大越前面，相同大小按样式赋值的先后顺序排序
