教程十:flex容器将消除item的块状特性

今天清云小程序教程就来好好讲解一下flex。首先大家一定要对flex有一个基本的概念。Flex就是Flexible Box的缩写,顾名思义为“弹性盒子”或者“弹性布局”,用来为盒装模型提供最大的灵活性。“弹性盒子”它有2个基本的概念,大家是一定要知道的。一个是flex container”,弹性容器;还有一个是“flex item”,是“flex container”下面的子元素。那么,从这2个概念呢,我们可以大致的猜测出,如果你要用弹性布局的话,那么最起码你要有一个“容器”。所谓“弹性布局”也就是对“flex container”下面的子元素“flex item”采用flex布局。

那在清云小程序教程上次讲的示例里面,“chunk”小色块其实就是我们的“flex item”。如果我们要对我们的小色块采用“弹性布局”的话,我们必须为我们的小色块新增一个“ container”容器,那我们现在就动手来更改一下小程序项目的classic.wxml文件,我们现在要为我们的小色块增加一个容器,那么这个容器同样可以用“view”组件来完成。这里我们的“view”就不能是单行了,这是因为它的中间是需要嵌套一些子元素的。

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

先来给我们的view一个样式,叫做container,现在我们再来编写一下我们的container,打开classic.wxss,在这里编写样式。在这之前我们要把.chunk里面的“display:inline-block;”去掉。如何让一个普通的“view’成为一个弹性盒子呢?我们需要用到“display”属性,把它改成“flex”,这里就不是inline-block”、“block”、“inline”这些了。只有指定一个container的“display”属性是“flex”,它才是一个弹性盒子。没有“display:flex”这个属性的话,那它很明显就是一个普通的容器,它并没有弹性盒子的特性。

.chunk{
    width:100px;
    height:100px;
}
.container{
    display:flex;
}

之前清云小程序教程中想让小色块排在一行,使用的是display:inline-block;”这个方法,消除色块的块状特性。那么,现在我已经把色块的“display:inline-block;”去掉了,转而设置了container的“display”属性是“flex”。那么,现在来看看想要小色块排在一行,而不是每个色块独自占有一行,怎么样可以做到,使得每一个色块变成一个“inline-block”这样的属性,这样它才能排布在一行。那么现在我们来看看,怎么样可以消除它的块状特性呢?

现在先让我们来看看小程序模拟器上,这些小色块是排在一行还是分布成了3行的?

那我们能够看到,这3个小色块是排在一行的。

关于弹性盒子的特性,大家一定要知道,就是它本来是块状元素,一旦它放置于一个弹性盒子容器里面,那么,它的块状元素的特性就会消除掉了。

有些同学的代码里面已经定义了容器的display:flex;”,但是他还是在子元素中添加“display:inline-block;”,这个是有点画蛇添足了的。

这一点希望大家知道,这个在小程序代码中也是一个很重要的点。


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