举个例子，微信小程序的左右布局
微信小程序的在同一行有一个控件放在左边，另一个控件放在右边，可以利用来wxss作实现;
demo.wxml代码如下:
<view class="container">
<text class="left">左边的文本</text>
<text class="right">右边的文本</text>
</view>demo.wxss代码如下:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.left {
font-family: "黑体";
color: #888;
font-size: 40rpx;
}
.right {
font-family: "楷体";
color: #ff0000;
font-size: 80rpx;
}没错，上面的例子就是flex布局。
微信小程序 View 支持两种布局方式：Block 和 Flex
所有 View 默认都是 block
要使用 flex 布局的话需要显式的声明：display:flex;
1.横向布局和竖向布局
要设置属性 flex-direction ,它有4个可选值：
row：从左到右的水平方向为主轴
row-reverse：从右到左的水平方向为主轴
column：从上到下的垂直方向为主轴
column-reverse：从下到上的垂直方向为主轴
2.设置元素在横向上的布局方向
需要设置 justify-content 属性，它有5个值可选：
flex-start：主轴起点对齐(默认值)
flex-end：主轴结束点对齐
center：在主轴中居中对齐
space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等
space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同
3.设置元素在纵向上的布局方向
需要设置 align-items 属性，它有5个值可选：
stretch 填充整个容器(默认值)
flex-start 侧轴的起点对齐 （这里我们手动设置下子 view 的高度，来看的明显一些）
flex-end 侧轴的终点对齐
center 在侧轴中居中对齐
baseline 以子元素的第一行文字对齐
4.设置好flex布局后，其子 View 还有属性 align-self、flex-wrap、order和flex-grow 属性
align-self可以覆盖父元素的 align-items 属性
它有6个值可选：
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
（auto 为继承父元素 align-items 属性，其他和 align-items 一致）
flex-wrap 属性，用于控制子 View 是否换行，有3个值可选：
nowrap：不换行（默认）
wrap：换行
wrap-reverse：换行，第一行在最下面
order 属性，可以控制子元素的排列顺序，默认为0
比如3个view 分别水平排列为 item1、item2、item3，我把 item3 设置 order:-1; 可以把 item3 排在前面
flex-grow属性，定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。相当于Android的权重比例
最后，想更深入了解flex布局，也可以参考
视图容器之flex 常用布局
