微信小程序-view元素Flex布局

对于网页布局，推荐 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以参考完全教材，我推荐一个阮老师的，下面是链接

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

对于 Flex 有几个属性，然后对常见的属性展开说明即可，怎么使用就完了。 对于这个布局的多动手，实在是一个非常不错的方法。

flex-direction flex-wrap flex-flow justify-content align-items align-content

• 先声明这个是什么布局， 直接在对于的父view里面用， 下面的代码

display: flex;

• 对于第一个flex-direction，父view里面的元素排列方式，就是flex布局（这里注意是里面的view才生效，如果作用范围不是这个，那就没有效果了），其值有三个，第一个是默认。其他看单词意思就知道了。依次是 横向，横向从右往左、垂直、垂直从下到上。

row | row-reverse | column | column-reverse;

• flex-wrap 这个意思，对于元素太多，而且指定每个view的宽度，view 宽度大于最大宽度是否换行，依次的意思不换号、换行、换行且颠倒

nowrap | wrap | wrap-reverse

• justify-content这个是对其方式，依次是左对齐、右对齐、居中、两端对齐，项目之间的间隔都相等、每个项目两侧的间隔相等

justify-content: flex-start | flex-end | center | space-between | space-around;

• align-items属性定义项目在交叉轴上如何对齐。

这个我还没有用过，不过看介绍蛮花哨的。nice~

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

其他的参数对于小项目来说，用的较少，说了也不一定记得住，如果有用到的话，在实战种用起来。这个才是记得最牢固的！