清云小程序教程十四：justify-content属性解析二

原文链接：清云小程序教程十四：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布局“了。

原文地址：https://blog.csdn.net/king3062211087/article/details/97101793