清云小程序教程九：flex布局之block、inline、inline-block

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

 

首先，我们打开我们的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