清云小程序教程十一：flex-direction的应用

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

上节课我们实现了3个小色块的横向排列，那么怎么让它们再重新呈现纵向排列呢？之前我们使这3个小色块呈现纵向排列是在小色块上添加“display”属性，使它为“block”，块级元素，那么我们现在再来设置一下：

.chunk{
    display:block;
    width:100px;
    height:100px;
}
.container{
    display:flex;
}

然后看一下运行效果：

那我们可以看到，设置它的“display:block;”是无效的。这个就和上节课讲的有关了。一旦这些色块处于弹性盒子里面，那么它们的块状特性就会消除，所以说就算你指明了它的“display:block;”也是没有用的。那如果我们要用flex来实现纵向的排布该怎么做呢？

这里要引入一个概念，叫做“flex-direction”，很明显这个属性是用来设置flex item，也就是容器下面的子项的排布方向的。如果我们把它设置成：

.chunk{
    width:100px;
    height:100px;
}
.container{
    display:flex;
    flex-direction:column;
}

一旦我们把“flex-direction”指定成“列”，那么我们再来看一下运行的效果：

现在这3个小色块就呈现出了纵行的排列。这个就是“flex-direction”的作用，它将指定“flex item”的排列方向。我们把它设置成“column”，那么它将是纵向排列的；同理，我们把它设置成“row”，那么它将是横向排列的。我们在一开始的时候，没有设置这个“flex-direction”它也是呈现横向排列的，这是因为“flex-direction”它默认的就是横向排列。

看到这里还不能够看出“弹性布局”有什么优势，因为之前不管是横向排列还是纵向排列，我们都可以用“display”这个属性来实现，那么现在我们就来看看怎么体现它“弹性盒子”的优势。

之前我们已经知道，“flex-direction”可以决定我们子元素的排列是横向还是纵向，那么，我们如果想要让这3个小色块是蓝色快在最前面，红色块在最后面，那么我们该怎么来实现呢？

为了大家能清晰看到这个变化，我们为我们的每个色块来加一个序号。回到我们的classic.wxml文件，这里我们需要把改变一下“view”这个组件了，要加上序号，“view”就不适合用单行了，我们把它写成一对的。

<view  class="container">
    <view class="chunk">
       1
    </view>
    <view class="chunk">
       2
    </view>
    <view class="chunk">
       3
    </view>
</view>

这个时候我i们来看一下运行效果：

这个时候它就有了一个1、2、3的序号。那么怎么变成把它变成3、2、1呢？

如果我们用传统的方式，要使得这些色块颠倒还是有一定的难度的，至少代码写起来不会简单，但是我们用flex布局就很简单了，只有更改一个属性就可以实现。之前我们已经知道“flex-direction”有2个基本的选项，一个是“column”，列；一个是“row”，行。除了这2给基本的属性之外，每一个方向上还有“reverse”，倒序排布。我们把它设置成：

.container{
    display:flex;
    flex-direction:row-reverse;
}

来看看运行的效果吧：

你可以发现，我们已经成功的是实现了排列方向上的颠倒。我们还可以让它在列的方向上实现颠倒：

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

运行效果：

大家记得，“flex-direction”最常用的选项有4个：“column”、“row”、“column-reverse”、“row-reverse”。大家务必记住这4个常用的flex-direction的取值。

这里给大家留一个思考题：列方向上的颠倒以前和现在都是从我们的导航条开始排列的，但是行方向上的排列是之前是顶在左边的，颠倒之后却是顶在右边了，这是为什么呢？