清云小程序教程十：flex容器将消除item的块状特性

原文链接：http://www.0575yun.com/articledetail/id/53.html

 

今天就来好好讲解一下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;”，这个是有点画蛇添足了的。

这一点希望大家知道，这个也是一个很重要的点。