这节课我们来了解一下View组件的基本使用。要在页面上，实现如图一个flex横向布局的效果，在里面有三个元素分别是ABC，我们希望这三个元素横向布局，如何实现？
首先来看一下结构，然后再去看这个样式在结构里面我们外面是一个包裹性质的大容器，有各类containe。一里面包含了三个子View，每个View里面都包含了一个文本，分别是ABC。然后需要写样式让他们实现这种横向的flex布局效果。大家发现这个样式除了标签名字不一样之外其他的和普通的CS都是完全一样的，首先先选中里面的这三个字，然后文本让他在车中进行对齐，接下来咱们分别通过这个CS3的选择器，实现这1 2 3这三个子元素分别加1个背景色。
这个container1容器来一个flex布局，然后设置在横线上进行分散对齐，就可以实现对应的效果了。实现思路之后，接下来打开微信开发者工具，去写一下对应的代码。首先先找到对应的页面要在这个list页面上去实现对应的效果，这个文件夹里面找到list对应的这个页面，先找到页面的结构对应的文件list点，WXML，然后再找到对应的样式表文件，就是类似点wxss在第一个这个文件里面。
在这放一个Q，接下来给他起一个class类名是container con tin gen te n ur e里面，咱们放三个词来。
写完这个结构之后保存，大家看在页面上就出现了三个文本，分别是ABC，之前介绍过这个view就相当于是网页里面的div。这个view默认是占满整个这一行的，因此这三个ABC是纵向排列的，接下来需要去美化样式了来，首先给里面这三个字view加宽和高，来选中这个父元素在这里用类名选择器选中复原所用的空格，这是后代选择器。
第三个，把这个一改成二改成三里面，放一个background color，去设置背景颜色，第一个来一个浅绿色，就是light green。
第三个来个浅粉色来background-color： lightpink，来请看这个UI的效果。
如上完美地实现了这个横向分散布局的效果。
