清云⼩程序教程⼗三：justify-content属性解析⼀我们先来给我们的容器⼀个背景颜⾊，以便于我们更好地看清楚接下来的操作：
.container{
display:flex;
flex-direction:column-reverse;flex布局对齐方式
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种取值，不⾏就换⼀下好了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。