教程十四:justify-content属性解析二

今天清云小程序教程继续来讲讲justify-content属性的几个取值,上次说了”justify-content“的2个取值:”flex-start“、”flex-end“,那么本节课清云小程序教程再来看看justify-content“其他一些取值。上节课清云小程序教程中已经看到了”flex-start“和”flex-end“的效果,那么如果现在我想让这3个元素居中,该怎么实现呢?

”justify-content“还有一些其他的取值,我们可以看到这里”center“就是我们要实现的效果——居中,我们把它改成”center“:

.container{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    height:400px;
    background-color:#999999;
}

之后再来小程序模拟器看下效果:

可以看到我们的3个元素已经呈现居中对齐的效果了。截止到现在为止,关于”justify-content“清云小程序教程已经讲解了3个取值了,分别是”flex-start“、”flex-end“和”center“,这3个取值的效果大家都很好理解,那么再看一下,另外2个常用的取值,一个叫做”space-between“,我们来看一下”space-between“的效果:

.container{
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
    height:400px;
    background-color:#999999;
}

“space-between”呈现的是:

在小程序中“space-between”的意思就是让最左边的元素靠左对齐,最右边的元素靠右对齐,除了这两个头尾元素之外其他的元素保持等距的间隔。如果大家觉得这个概念过于复杂,给大家一个建议,也是经验之谈,关于“space-between”抓住一个关键的概念,“space-between”它实现的是一个平均分布。现在我们看到的是在水平方向上面的平均分布,我们再来看看垂直方向上的平均分布

.container{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:400px;
    background-color:#999999;
}

同样,垂直方向上也可以实现这样的平均分布。

关于”justify-content“我们已经学习了4个取值了,那么下面我们介绍最后一种取值,叫做space-around。来看一下space-around“的效果:

也许你不能直接的观察出这样的效果是一种怎么样的效果,那么,清云小程序教程还是给大家介绍一下这个概念。

如同刚刚清云小程序教程前面说的平均分布,“space-around”其实实现的是一种等距分布。很多同学会奇怪,这怎么就实现了等距分布呢?1号元素距离顶部的距离和1号元素距离2号元素的距离明显是不相等的,那怎么就叫等距分布了呢?这里等距的意思是说,对于小程序中每一个”flex item“子项来说,它们2侧的距离均相等,注意我说的是”均相等“,也就是说全部都是相等的。1号元素两侧的距离同2号元素两侧的距离以及3号元素两侧的距离全部是相等的,这个是”均“的意思。理解了这个概念之后,大家应该就清楚了,为什么1号元素距离顶部的距离要小于1号元素距离2号元素的距离及2号元素距离3号元素的距离了。1、2这两个元素之间的距离其实是1号元素下侧的距离加上2号元素上侧的距离,是2倍于1号元素上侧的距离的。

”justify-content“它的5个取值,清云小程序教程已经全部讲完了。顺便说一下,清云小程序教程为什么把这个属性说的那么详细呢,因为在小程序里,不管是简单的布局还是复杂的布局,都是依靠”flex“来实现的,它非常的重要;然后呢,它的选项取值也比较多。可能很多同学看完都忘了,忘了是很正常的,那么,如何来学习这个”flex布局“呢?其实就是你看完小程序课程之后有一个大致的概念,更关键的是,你以后在写这个项目代码的时候,一定要多用这个”flex布局“,不需要去死记硬背,多写几次,熟练了之后就能够得心应手的来应用”flex布局“了。



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