教程十七:小程序布局之stretch和baseline

之前的清云小程序教程我们讲了“justify-content”和“align-items”2个属性,我们已经知道“ justify-content”常用有5种取值:“flex-start”、“flex-end”、“center”、“space-between”和“space-around”;而“align-items”也有5种取值,我们也已经学了其中的3个取值:“flex-start”、“flex-end”和“center”。在这里我们也可以看到它们有3个取值是一样,分别是“flex-start”、“flex-end”和“center”。不同的在于“align-items”少了“space”的2个取值,多了一个“baseline”和一个“stretch”。接下来清云小程序教程将带领大家简单来看一下这两个取值在小程序中的作用和效果。

首先还是把我们的代码还原成:

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

我们现在显示的是高100px,宽100px的小色块,如果我把高度注释掉:

.chunk{
    width:100px;
  /*  height:100px;*/
}

显示的就是这样的:

可以看到,在高度注释掉之后,小色块的高度只有这么高了。这里简单说一下,为什么会出现这样的样式呢?这是因为你没有给每个色块设置一个高度的话,它的高度在小程序中就是根据里边的内容自适应的。那么,在这种情况下面,我们把“align-items”设置成“stretch”,会变成什么样子呢?

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

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

大家注意了,我是在把高度注释掉的情况下,设置“align-items”成“stretch”才会出现这样的效果。我们可以看到“stretch”效果会把我们的子元素呈现出一个拉伸的效果,铺满我们的容器。这里有一个一定要注意的,就是没有高度设置的情况下才会呈现这样的效果,如果没有注释高度,还是把高度加上的话,那么,又会是怎么样的呢?

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

再到小程序模拟器看看,出现的就是这样的效果:

这时候设置“stretch”其实是无效的,因为你明确给了“flex-item”一个高度。我们要强调,在小程序中,“stretch”是“align-items”也就是交叉轴的一个特性,“justify-content”主轴是没有这个特性的。

关于交叉轴他还有一个特别的取值——baseline。“baseline”顾名思义是基线的意思。但是当我们设置成“baseline”的时候,我们会发现,并没有任何的效果。那么,我们就来揭秘“baseline”在小程序上的作用。我们现在color1、color2、color3是分别作用在3个小色块上的,现在我们来为我们的小色块设置一下字体大小,分别在color1、color2、color3下面加一个“font-size”设置成不同大小的字体。

.container{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    align-items:baseline;
    height:400px;
    background-color:#999999;
}
.color1{
   background-color:brown;
   font-size:26px;
}
.color2{
   background-color:aqua;
   font-size:20px;
}
.color3{
   background-color:blue;
   font-size:14px;
}

现在我们保存,在小程序模拟器看一下效果:

我们会发现3、2、1着3个元素出现了一个错位的效果,那么怎么会出现这种错位呢?按理来说,我们改变了字体的大小不应该让我们的“flex-item”出现一个位置上的偏移,这是说不过去的。这个就是align-items”设置成baseline的一个效果,为了更清楚的理解baseline”的效果,我们可以先设置成“flex-start”:

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

出现的效果:

这里可以看到,我们给每个元素加上的数字并不是对齐的。这个时候我们在还原成“baseline”,然后再来对比着看看。


  


这时候特点就出来了,大家有没有发现,虽然子元素不再对齐,但是,数字的底线是对齐的,这就是小程序中“baseline”的特性,它将保证每一行元素的文字的基线是对齐的。

我们可以更加精准的来描述“baseline”,首先大家要有一个认识,“baseline”并不是让子元素去对齐,而是让子元素里面的文字去对齐。那么参考哪一个子元素中的文字来对齐呢?它是参考了第一个子元素中的文字来对齐的。也就是说,“baseline”将以第一个子元素中的文字底线作为一个基准来对齐,其他的子元素将根据这个基线来自动调节它的位置。这样就可以保证,所有的文字在一条基线上,但是你保证了文字的对齐的话,就不能够保证所有子元素是对齐的,所以就出现了这种错落有致的现象,但是文字的基线是对齐的。这个就是小程序“baseline”的基本作用。

大家跟着清云小程序教程将会学到更多小程序的知识,并且能够在小程序实践中灵活应用。


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