教程九:flex布局之block、inline、inline-block

首先,我们打开小程序的classic.wxml文件,在小程序的classic.wxml来写一些代码,来打造一些我们要使用的小色块。这个小色块我们可以通过我们的”view“组件来实现,因为这些小色块中不需要添加其他元素,我们就直接用”<view />“这样单行的形式来写,不需要再加其他结束标签了。先写3个”<view />“组件,然后我们切换到我们的小程序模拟器,到这里来看一下预览结果,那其实现在你是看不到任何东西的,这是因为我们现在只有页面的骨架,但是这个页面骨架里面的元素的样式是没有的,这个时候,我们就需要来给我们的每一个组件添加一个样式。这个样式就需要在小程序项目的wxss文件里面来完成。

现在打开classic.wxss文件,我们来为”view“定义一个样式类。首先,我们要为我们的方块设置它的宽度和高度,为了让每个色块有一个颜色呢,我们再为我们的小方块添加一个背景色属性。

.chunk{
    width:100px;
    height:100px;
    background-color:brown
}

现在我们编写好了这个样式类之后,我们就把它添加到我们的”view“组件上。对一个组建要使用样式,我们用“class”这个属性来实现。

<view class="chunk"/>
<view class="chunk"/>
<view class="chunk"/>

3个都先用同样的样式类,现在我们到小程序的模拟器上来看一下效果:

那么,在我们的模拟器上可以先看到这样的一块红色的区域,它其实是由3个小色块组成的,只是因为这3个小色块的颜色没有一个区分,所以看上去像是一列样色块。下面,我们给这3个方块设置成3个不同的颜色。

我们还是到我们的classic.wxss文件里来,在这里我们首先先来定义3个不同的颜色类,同时把我们.chunk样式类里面的背景色去掉:

.chunk{
    width:100px;
    height:100px;
}
.color1{
   background-color:brown;
}
.color2{
   background-color:aqua;
}
.color3{
   background-color:blue;
}

然后回到我们classic.wxml文件中,把我们刚才定义的3个颜色类,添加到我们的“class”属性中:

<view class="chunk color1"/>
<view class="chunk color2"/>
<view class="chunk color3"/>

在这里可以发现,“class”属性是可以同时添加不同的样式类的。(这里讲到的知识比较简单,就是给大家热身一下的,希望大家不要嫌太简单。)

再来小程序模拟器看一下运行的效果:

在这里你可以看到,这3个小方块是呈现竖直排列的,它不是排布在一行的,为什么小方块处出现了换行呢?那么原因很简单。其实在小程序中,这个”view“组件跟我们在写网页html时候的“div”很像,大家如果属性“div”,你就知道,“div”它是一个块级元素。那么块级元素默认的就是一个元素占一行。虽然说,你限制了这个元素的高和宽,但是它的本质还是一个块级元素,既然是块级元素,那它就得自己占一行,不管你的块级元素的宽度有多宽,每个元素都会另起一行。这点希望大家知道,也是我们css的基本知识。

我们可以改变一下.chunk的样式,来实现不同的排布。在默认情况下面,是否是块状元素是通过“display”这个属性来设置的。“display”的默认值是“block”,这个“block”代表的就是块状元素。如果我们想让它变成一个行内元素,也就是非块状元素,怎么办呢?可以把我们的“display”属性设置成“inline”。设置号之后,我们再来模拟器上看一下效果。那么,这时候,你会发现其实这3个小色块是不见了的,这是为什么呢?这是因为行内元素,它默认的是不能够设置它的高和宽的。那如果我想让它既有宽和高,又是行内元素该怎么办呢?那就把我们的“display”属性设置成“inline-block”。

.chunk{
    display:inline-block;
    width:100px;
    height:100px;
}

这样原来的块状元素它既有行内元素的特性,又可医设置它的高和宽,设置完了之后我们再来看看效果:

它就变成这样的排布样式了。现在它就不再具备块状元素的特性了,不会每个元素都占一行了。

刚刚所说的技巧在我们的网页开发中应用比较广泛,但是,在小程序中一般很少会去设置它的“display”属性,那么然后说,我们不设置“display”属性,又要让这3个小色块并排排在一行,这个该如何做到呢?那么用我们的flex,就可以实现这样的效果,同时也是flex的一个很重要的特性。

下一个教程我们就来引入flex。


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