教程十一:flex-direction的应用

上节课清云小程序教程实现了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的取值。

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


               




          




版权保护: 本文由 清云小程序 原创,转载请保留链接: http://www.0575yun.com/articledetail/id/54.html