教程十八:小程序布局之flex-wrap以及消除间距

本节课清云小程序教程再 来讲讲flex里面一个常用的属性。清云小程序教程在上节课已经教了baseline和stretch,这节课我们首先把“align-items”还原成“flex-start",先不要用“baseline”,还是用“flex-start”来学习一下如何在小程序中换行。

目前在小程序中各个参数下面,这3个元素是不可能出现换行的,因为现在一行的空间是可以容纳下这3个元素的,所以说它不可能出现换行,那么我们现在就来改变一下这3个小色块的宽度:

.chunk{
    width:150px;
    height:100px;
}
.container{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    align-items:flex-start;
    height:400px;
    background-color:#999999;
}

我们会发现,当每个小色块宽度设置成“150px”时,而现在的屏幕是在iphone6的情况下,它的宽度是375px的,应该是出现换行的,可是现在在小程序模拟器上显示的效果却是这样的:

它没有进行换行,这是为什么呢?我们每个色块的宽度是150px,3个就是450px,而屏幕宽度只有375px,应该是承载不了这3个元素的,应该出现换行,可是现在看到的效果却是它们确实是只占了一行的,这是为什么呢?

总的宽度肯定是450px,但是这个屏幕只有375px,那么,小程序中flex是如何来处理这种情况的呢?这个时候其实我们来量一下每个元素的宽度就知道flex是如何来处理的了。这个时候,我们要把它放成100%,因为如果你不是100%的话,它的宽度是小于真实宽度的,量出来也是不准的。当然你也可以用调试器看,我们会发现大概是125px,也就是说,每一个元素并没有显示150px,而是进行了压缩。那么这个就是flex处理的一种机制。

如果说总元素的宽度大于屏幕的宽度,然后又没有设置它换行,那么,flex机制就会让每一个元素进行压缩,平均分配屏幕总的宽度。其实就相当于总宽度除以3,就是每个元素的真实宽度。平均分配,这一点很重要。

现在设置“width:150px;”已经没有效果了,那么如果我就想让每一个元素现实的宽度是我设置的150px,在小程序中该怎么做呢?现在总宽度只有375px,那么它承载不了3个元素,必定有一个是要到移到下面去的,产生换行的效果。那么,如何产生这个换行的效果呢?

这里我们就要引入flex的另一个属性——flex-wrap。我们这节课要讲的就是“flex-wrap”,那么我们来看看在小程序中“flex-wrap”都有哪些取值?

一个是“nowrap”,也就是它的默认值:不换行,它的机制就是平均分配;那么我们要让它换行,那就应该取“wrap”。

.chunk{
    width:150px;
    height:100px;
}
.container{
    display:flex;
    flex-direction:row-reverse;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    height:400px;
    background-color:#999999;
}

那么我们来看看效果:

这时候小程序模拟器上就出现了换行,这时候我们再来量一下每个元素的宽度,你就会发现,现在的宽度就是150px,我们在小程序的“classic.wxss”中给它设置的宽度了。那么,现在确实是是实现了换行,但是我们会发现,它有一个很奇怪的现象,就是第3个元素跟上面2个元素之间隔了一段距离,这和我们想象的换行不一样。按照我们的常规思维,换行了之后,第3个元素应该紧贴着上面2个元素,可是现在却是这样的。那么,这是一个错误吗?不是的,这个就是小程序flex换行默认的特性。

那么,我们该如何来解决这个小程序中的特性呢?还是我强调的,解决问题的能力很重要,我们的脑子一定要灵活。虽然说默认情况下面,它会产生一个间距,而且我们可以观察一下,这个间距是非常有特点的,它的上间距和下间距是一样的。其实flex还是给你做了一个平均分布,这个就是flex的特性,它自动给你在下面的空间里面进行了居中。那么,我们要解决这个问题怎么办呢?我不想让它出现间距,怎么办?

我们要灵活的处理这个问题。这个就属于一些技巧性的知识了。那么我们如何来处理呢?现在它的上下是有间距的,那么说明,我们的容器高度是有富余的。有富余才会出现间距,那么我们就把这个富余去掉,也就是把整个容器的高度缩小,是不是就可以达到我们想要的效果了?那我们就来试一下吧!

首先改变我们的容器高度,因为每个元素的高度都是100px,2个就是200px,那么我们就把容器高度设为200px:

.chunk{
    width:150px;
    height:100px;
}
.container{
    display:flex;
    flex-direction:row-reverse;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    height:200px;
    background-color:#999999;
}

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

可以达到我们的效果!

大家从这个示例里面可以看出来,清云小程序课程里面,一直强调的一种能力的培养。很多时候你去看flex的教程,它都没有告诉你怎么解决这种问题,但是很多时候,如果我们善于去思考的话,你就会发现,其实消除间距这个问题很简单。不管是在小程序中还是网页中,编程这个东西从来都不是靠死记硬背就能够把程序去写好的,一定要灵活,只要你多想想,多思考一下,你一定可以解决问题。


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