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时