清云小程序教程十三：justify-content属性解析一

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

 

我们先来给我们的容器一个背景颜色，以便于我们更好地看清楚接下来的操作：

.container{
    display:flex;
    flex-direction:column-reverse;
    height:400px;
    background-color:#999999;
}

我们再来看一下效果：

这样我们就比较清楚的知道了这个容器的宽度和高度以及它的位置，那现在这3个色块是向下对齐的，如果现在我们想让这3个色块是向上对齐的话，该怎么办呢？这里我们需要来学习flex布局里面的另一个概念：justify-content。justify-content属性用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，现在来看一下它都有哪些可取值。现在我们希望它向上对齐，那么我们把justify-content属性设置为“flex-start”，再来看一下效果：

它没有在对齐方向上有任何的改变，这是为什么呢？那么我们再来看一下另一个选项：

 

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

再来看看效果：

可以看到“flex-end”是可以实现向上对齐的。大家有没有觉得有些奇怪，为什么设置成“flex-end”可以让这3个色块呈现向上对齐？一般在我们常规习惯性思维里，向上对齐应该是“start”，向下对齐才应该是“end”；同理，向左对齐应该是“start”，向右对齐应该是“end”。这里我们只举例“column-reverse”，没有写“row-reverse”，大家可以自己去尝试下，可以发现，向左对齐应该要设置成“flex-end”才可以。

这是为什么呢，它怎么会和我们常规的思维刚好相反呢？这里其实还是“reverse”在起作用。

如果没有这个“reverse”的话，其实确实是”上“代表”start“，“下”代表”end“，”左“代表”start“，”右“代表”end“。我们把”flex-direction:column-reverse;“还原成”flex-direction:column;“:

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

如果现在设置成”column“，那么”flex-end“会让这3个色块呈现一个怎么的对齐呢？我们来看一下效果：

当”flex-direction“设置成”column“时，”flex-end“就符合我们是惯性思维了，向下是”end“，那么同样我们可以把”flex-end“再换成”flex-start“，这时候大家可以看到它是向上对齐的了。”start“代表了上。那么我们再拿水平方向的对齐来看做一下练习。

 

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

当”flex-direction“设置成”row“，”justify-content“设置成”flex-start“时，这3个元素由于设置的是”row“，没有倒叙，所以它是向左对齐的，那么是不是这样的呢？我们来看一下效果：

可以看到，没有倒叙，它就是呈现的1、2、3并且向左对齐的样子。那么如果我们加一个”reverse“，使它成为倒叙呢，它又该是怎么样排布的呢？3个元素将呈现3、2、1并且由于我颠倒了，这时候的”flex-start“就代表了向右对齐 ，我们来看看是不是这样的：

3、2、1并且向右对齐。

我们来总结一下，”justify-content“这个属性主要是来控制”flex item“也就是子元素的对齐方式。常规的思维方式呢，”flex-start“代表了上和左，同理，”flex-end“代表了下和右，一般”flex-direction“加上一个”reverse“的话，那么一切和我们惯有的思维是呈现一个颠倒的。”reverse“情况下，”flex-start“代表了下和右，”flex-end“代表了上和左，虽然看起来有点复杂，其实大家不需要去死记硬背，为什么？其实这个取值无非就是两种，要不就是”flex-start“要不就是”flex-end“，当你想起实现某种对齐方式的时候，如果设置成”flex-start“不行，那很简单，你就把它改成”flex-end“就行了啊，没有必要去记啊，就这么2种取值，不行就换一下好了。