flex布局方法详解之flex-direction

首先声明，本文参考了阮一峰老师的博客，原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

本文结合微信小程序 来对flex布局做一个说明，用到了view组件，其实你只需要把view看成DIV就行了。

本节重点讲解一下flex的布局方式。

新建一个页面：

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。

比如，你可以给一个DIV元素设置布局方式为flex，在微信小程序开发中，我们一般给view组件设置为flex布局。

Flex容器有多个属性。

问题1：如果不采用flex，你能否用DIV + CSS实现这种布局方式呢？

让我们尝试一下：

CSS：

结果：

显然，由于view是块级元素，和DIV类似，会占满一整行，所以图中的第二种布局方式可以轻松实现。那么问题来了，如果我要让1,2,3反着排列呢？

路人甲：“So Easy！把三个view反过来写不就好啦。”

诶，还真可以。但是啊，假如我不允许你反过来写呢？比如，我们做一个电影列表，接口查询出来的数据是根据日期正序排序的，而我们页面渲染的时候要求根据日期倒叙排序，你怎么办？当然了，你也许可以通过数组反转的方式来实现，可是万一我就是要求你通过css来实现呢？

显然，用传统的div+css很难实现这样的一个需求。我们在此可以采用flex技术。

首先，给box设置为flex盒子：

发现一件好玩的事情，三个view排在一排了。

现在，有请我们今天上场的第一位嘉宾： flex-direction ， 掌声欢迎！ flex-direction 属性决定主轴的方向（即子元素的排列方向）。

 row（默认值）：主轴为水平方向，起点在左端。  row-reverse：主轴为水平方向，起点在右端。  column：主轴为垂直方向，起点在上沿。  column-reverse：主轴为垂直方向，起点在下沿。

原来如此啊，flex盒子有一个默认的属性，flex-direction:row，也就是说，他的子元素默认就应该是这样排列的。

让我们依次来看一看这位嘉宾的其他本领。

是时候展现真正的技术了~~