清云小程序教程八：flex布局之所谓布局

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

 

从这节课开始，我们要为大家讲解flex布局。那么，什么是flex布局呢？Flex是Flexible Box的缩写，顾名思义为”弹性盒子“或者“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。那什么是布局呢？布局也就是我们用代码来控制页面上面的每一个元素，按照我们设计图的样式来正确的排布出来。

这里我们用具体的示例来为大家讲解。

在这个页面中，我们可以看到，头部部分大体上可以分为3个元素，第一个是日期元素，第二个是点赞元素，第三个是我们的分享按钮的元素。那这3个元素是怎样来实现它的分布的呢？这里我们也看到了，3个元素是有它自己的分布的，日期元素位于左边、点赞元素和分享按钮的元素位于右边，而点赞元素和分享按钮的元素之间还有一定的间距。在我们画设计图的时候这个是很好完成的，那么在我们的小程序中他又该怎么来完成呢？这里就需要一定的布局的技巧，这个是第一个点。第二个点呢，大家对于布局的理解一定要用一个嵌套的思维来理解。比如，刚才说的，上面头部可以大体分为3个元素，但是我们再观察每一个元素，我们可以发现在每一个大元素里面又可以分为一个个的小元素。对于日期组件来说，它又可以分为4个子元素（No.、17、|、三月）。这4个子元素它的底部是在一条水平线上的，那么这种效果又应该怎么来布局去实现呢？再比如，点赞元素它有2个子元素组成，一个爱心子元素，还有右上方的数字子元素。那么，这个数字是如何漂浮在爱心的右上方呢？这也是一种布局。

我们刚刚讲的这个布局可以看做是微观上的布局，相对的还有宏观上的布局。那么我们现在来看一下宏观上的布局。我们看到这一整个页面，我们首先是要考虑它可以分为哪几个部分呢？首先，是头部这一条；再来是图片这个部分；然后是这个文字部分，最后是底下的导航部分。我们是如何控制这4个部分，呈现出一个垂直排列的效果，这个也是一个布局。相对于刚刚关注的头部这一小块的内容，整体的页面布局我们可以称为宏观布局。

那么，布局一定是我们前端开发者需要掌握并且熟练，更或者要精通的一种技巧。在开发中，布局，我们常用的方式有很多种，也有很多的工具，常用的工具就是Bootstrap这样一种栅格系统，它可以很好地帮助我们去实现各种页面的布局。小程序中，无法使用Bootstrap，我们也没有必要去用Bootstrap。小程序对flex的支持是非常好的，所以说，我们在小程序中一般都是使用flex来进行布局的。flex真的是非常的好用，这里要强调一点，flex并不是小程序中所独有的，它也可以应用到网页中，只不过在过去，很多浏览器对flex布局的支持并不是很好，但是小程序对flex的支持可以说是相当的好了。你对flex非常熟悉或者精通的话，在小程序中的布局是非常简单的。也许，你用其他的各种各样的方式实现了这个布局，要写的代码非常的多，但是你用flex的话就可以用很短的代码来实现一样的效果。

在微信的官方文档中，在view一栏，他也给出了一些示例，大家可以自己去看看。但是这里的示例是最简单的，只是基础的表示出了flex布局的特性，并没有深入的讲解flex。接下来我们会为大家详细的讲解flex的布局。那么要讲解flex，我们首先来做一下和文档中这样的色块，用色块来演示一下flex布局的能力。

我们先把上次新建的Pages文件下的classic.wxml打开，在这里先创建几个小色块，随便也学习一下“view”这个组件的基本应用，同时也初步的接触一下.wxss文件的编写。

详细讲解请听下回分解。