清云小程序教程十二：reverse倒序排序

原文链接：http://www.0575yun.com/articledetail/id/55.html

上节课给大家留了一个思考题：3个小方块在列方向上的颠倒，以前和现在都是从我们的导航条开始排列的；但是行方向上的排列却是之前是顶在左边的，颠倒之后却是顶在右边了，这是为什么呢？按照我们的之前的思路，竖直排列的色块它在做了倒叙之后应该是顶在最下方的，可是它怎么没有到下面去呢？这是因为整个容器的高度是只有3个色块这么高，我们可以直接打开调试器，点击下方出现的小箭头，看一下这个“container”这个容器的高度：

这里蓝色区域标识出来的就是“container”这个容器的高度和宽度，375*300，它的宽度是充满整个屏幕的，但是它的高度就只有三个小色块那么高。所以说容器就只有这么高，这3个小色块可能到下面来吗？不可能是吧。而在水平方向上，倒叙以后可以到右边去就是因为它的宽度是比这3跟小色块宽的，所以它们就整体的顶到了右边。那么在垂直方向上又是为什么只有300这么高呢？这是因为，如果我们没有给“container”这个容器定义一个高度的话，它的高度就是自适应的，而对于宽度它是100%的。所谓自适应就是它会根据你容器里面的所有元素的高度总和来决定它自己的高度。了解了高度是自适应的之后，我们就可以来尝试给这个容器一个高度。

.container{
    display:flex;
    flex-direction:column-reverse;
    height:400px;
}

再来看一下模拟器上它的显示：

很明显，400px已经超出了3个小色块的高度总和，那么，倒叙之后，这个色块就往下偏移了。我们再看一下整个容器的高度：

由于高度出现了富余的现象，所以说，一旦使用了倒叙之后，小色块它也会出现和水平方向上一样的位移。

说了这么多，我们必须来总结一下。首先，对于“view”这个组件来说，如果你不指定宽度，那么一般情况下，它的宽度就是100%；而高度通常情况下是自适应的。然后，第二点，关于“reverse”倒叙，它不仅仅是让元素本身发生颠倒这个现象，同时所有元素的对齐方向还会发生一个改变。比如说，对于水平排列的时候，最开始序号1、2、3它是靠左对齐的，如果用了“reverse”了之后，那么元素的排列变成了3、2、1，产生了一个颠倒，同时它的对齐方向也会从最开始的左侧对齐变成右侧对齐。同样，不只我们水平方向的排列，垂直方向上排列的元素也存在相同的现象，如果我们用了“reverse”之后，原来的1、2、3会变成3、2、1，同时最开始是靠上对齐的也会变成靠下对齐。这个现象是希望大家一定要理解的。

总的来说，使用了“reverse”倒序排序，就需要注意2点：元素内容的颠倒和对齐方向的偏移。