1.flex布局
(1) 微信小程序的默认布局为 "display:block"——即为 "块" 布局，一个元素占一行，如下图：
三个默认布局view的排列方式
需要特别注意的是：要改变他们的布局，需要以一个父view来套住这三个子view。
使用flex布局时需显示声明 "display:flex"；
当仅添加了 "display:flex" 时，其布局类似于 "块" 元素使用了浮动布局（float:left），如下图：
flex布局作用效果
(2) 当使用flex布局时，有一个重要的属性 [ flex-direction ] ，该属性控制view的排列方向，默认为 flex-direction:row——即以水平方向排列（从左往右），如上图；
此外还有另外三个可选值：
row-reverse：以水平方向排列，从右往左
column：以垂直方向排列，从上往下
column-reverse：以垂直方向排列，从下往上
(3) 属性 [ justify-content ]
可选值
(4) 属性 [ flex-wrap ] ：该属性用于控制子view是否换行，默认为 flex-wrap:nowrap——即不换行
另外两个可选值为：
wrap：换行；
wrap-reverse：换行，第一行在最下方。
2.水平居中
(1)下面四行代码可以实现水平居中
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
居中效果
特别地，当一行位置无法容纳多个子view时，会将其余子view挤压至下一行
当一行只能容纳两个view时
当一行只能容纳一个view时
