微信小程序开发推荐使用flex布局。本人在平时的小程序开发中，都是优先使用flex布局。对于一个搞不懂css的后端程序员来说，使用flex布局真的是事半功倍，怎么用怎么爽。
flex布局教程：http://www.runoob.com/w3cnote/flex-grammar.html
参考资料：http://www.runoob.com/css3/css3-flexbox.html
Flexbox可以在不同屏幕尺寸上提供一致的布局结构。一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。
一、容器上的标签：
display: flex
flex-direction: row |row-reverse |column |column-reverse
顺序指定了弹性子元素在父容器中的位置。
justify-content: flex-start | flex-end | center | space-between | space-around
弹性项沿着弹性容器的主轴线（main axis）对齐方式。
align-items : flex-start | flex-end | center | baseline | stretch
设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap: nowrap - 默认| wrap | wrap-reverse
用于指定弹性盒子的子元素换行方式。（默认情况下（flex-direction: row），项目都排在一轴线上。flex-wrap属性定义，如果一条轴线排不下，如何换行 ）
align-content: flex-start | flex-end | center | space-between | space-around | stretch-默认
用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。（align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用.）
二、弹性子元素上的标签
order:
排序：用整数值来定义排列顺序，数值小的排在前面。可以为负值。
margin:
对齐：
设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。
margin-right: auto; 它将剩余的空间放置在元素的右侧。
设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。（ 完美解决我们平时碰到的居中问题）
align-self: auto | flex-start | flex-end | center | baseline | stretch
用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
用于指定弹性子元素如何分配空间。
就这点笔记。