教程八:flex布局之所谓布局

从这节课开始,清云小程序教程要为大家讲解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文件的编写。

详细讲解请听下回分解。


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