教程十三:justify-content属性解析一

清云小程序教程本节课让我们先来给我们的容器一个背景颜色,以便于我们更好地看清楚接下来的操作:

.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种取值,不行就换一下好了。

清云小程序教程注重的是大家在小程序编码时的灵活思维,不需要大家去死记硬背。


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