1。前言大家好，我是呈祥墨影！最近在做一个小程序，验证一些方向，开发效率确实很快。审核各种微信有点难，但总有办法解决的。如果你想开发一个小程序，就跟平时写一个app差不多。你需要有一个漂亮的前端布局，同时你需要处理好与前端UI组件的交互以及背后的逻辑。最近会分享一些关于小程序的内容（不保证，想到哪里就写什么），今天说说接触小程序的第一步：布局。如果你有前端经验，小程序非常好用。对于初学者来说，第一步当然是阅读小程序的官方文档，但是很快就会面临布局的问题。在小程序的开发框架中，会用到Flex布局，它可以帮助我们快速实现小程序中的UI布局。虽然现在主流浏览器都支持Flex，但是对于一些低版本的浏览器还是存在一定的兼容性问题。但是在小程序中，这不是我们需要考虑的，微信已经帮我们处理好了。下面我就以一个完整的小程序为例，说说关于flex布局的那些事。废话少说，言归正传。2、什么是FlexFlex是W3C在2009年提出的一种新的布局适配方案，通过Flex布局可以简单、完整、响应式的实现各种页面布局。经过多年的发展，已经得到了所有浏览器的支持，基本上可以让我们放心使用了。Flex布局是FlexibleBox的缩写，直译为“弹性盒子”，它也是基于“盒子”模型，将UI切割成小盒子进行UI布局。如果你不是开发小程序，只是想简单的开发移动前端，也可以使用Flex布局。虽然Flex已经被所有的浏览器支持，但是一些老的浏览器，比如IE9，并不支持。但是我们只是开发小程序，完全不用担心这个。3.Flex的使用方法3.1概述Flex的使用非常简单，只需要将显示设置为flex即可。除了flex，display还有一些其他的可选参数，具体可以参考文档。新手阶段，暂时只需要关注两个参数：block：指定块级布局，里面的元素总是换行显示，微信小程序的很多视图容器组件，默认displa是block，例如：view,scroll-view,swiper等。flex:指定Flex布局，可以在一个框内显示子元素。比如看一下效果图：这里在没有做特殊设置的情况下，默认状态是display:block，里面的每个元素单独显示一行。display:flex，我们可以在里面自由设置元素的布局形式，这里只展示了flex的默认效果，其实我们也可以利用flex提供的不同属性来进行更灵活的布局。3.2Flex方向轴要想掌握Flex布局，就需要时刻在脑海中有一个方向轴的概念。在flex布局中，自然有两个方向轴：主轴和交叉轴。横轴有些地方也叫侧轴，其实是一个概念。默认情况下，主轴沿水平方向延伸，而横轴恰好与主轴交叉。但这不是一成不变的。我们可以通过flex-direction属性改变主轴的方向。交叉轴的方向相对于主轴存在。当我们改变主轴的方向时，交叉轴也同时改变。由于flex布局也是通过一些属性来控制效果的，所以和我们平时写手机app是一样的。有些属性应用于父容器，有些应用于其中的子元素。下面分别说明一下在布局这些Flex布局时需要用到的属性。3.3父容器上的Flex属性在父容器上，已有的属性有：flex-direction：指定主轴的方向。flex-wrap：指定子元素超出父容器时的排列方式。flex-flow：flex-direaction和flex-wrap组合属性的简写。justify-content：子元素在主轴上的排列方向。align-items：子元素在横轴上的排列方向。align-content：多轴对齐。这几个，align-content除外，都是比较常用的属性。下面我们就来一一介绍这些属性，以及在小程序中使用它们的效果。1）flex-direction前面说到flex布局有两条轴，交叉相反，分为主轴和交叉轴。我们可以通过flex-direction确定主轴的方向，交叉轴的方向也确定了。在flex布局中，轴除了水平轴和垂直轴之外，还有起点（start）和终点（end）的概念。一起加载时，flex-direction有四个属性。row：默认值，主轴水平，起点在左边。row-reverse：主轴水平，起点在右边。column：主轴的垂直方向，起点在上。column-reverse：主轴垂直，起点在下方。虽然这个很容易理解，但是我们还是看看小程序中的效果。2)flex-wrapflex-wrap属性用于确定，在父容器中，当单行不能再包含所有子元素时如何换行。nowrap：不换行，这是默认值。wrap：超过单行时，自然换行。wrap-reverse：超过单行时，沿底部反转方向，自然包裹。css中有很多带有xxx-reverse参数的属性，大多数情况下我们用不到，但是了解一下也不错。虽然图片已经很清晰了，但是从flex-wrap:wrap可以看出，A、B、C这三个元素其实宽度是不一致的。一般简单介绍flex-wrap:wrap属性的文章，其实都会说把父布局裁掉多余的部分。我也偷了一张图，看看别人教程中显示的效果。其实如果在纯前端环境下使用flex-wrap:wrap，这个效果确实是一样的，所以这不是bug，我理解这就是性能上的区别。但是在小程序中的表现并不是这样的。最终会根据你设置的子元素的宽高比进行缩放，从而显示在当前行中。在此示例中，C块是最宽的布局。当我们增加C块时，让我们看看flex-wrap:nowrap在这种极端情况下在小程序中的表现如何。可以看出，它会按比例压缩里面所有布局的宽度，有点区别，需要特别注意。3)flex-flowflex-flow是前面两个属性flex-direction和flex-wrap的简写组合。在css中，很多属性都是一些属性的组合，有这样一种写法，用空格隔开即可。例如：.ele{flex-flow:rownowrap;}这样可以一次设置两个属性，不会冲突。4）justify-contentjustify-content可以用来设置子元素在主轴方向的对齐方式。它有五个选项：flex-start：默认，左对齐。flex-end：右对齐。居中：居中。space-between：两端对齐，元素等间距。space-around：每个子元素等间距。在性能上，元素与边框的距离是元素与元素之间距离的一半。justify-content看描述基本就知道效果了，但是space-between和space-around看似相似，其实还是有区别的。让我们看看最后的运行效果是最清晰的。可以看到space-around会保留左右边距，感觉就像给每个元素都加了左右边距属性，而space-between只有子元素之间的距离。5)align-itemsalign-items属性可以定义子元素在横轴上的对齐方式。它还有五个选择参数：flex-start：交叉轴的起点对齐。flex-end：横轴末端对齐。center：横轴方向居中。baseline：子元素的第一个元素，内容与基线对齐。stretch：默认参数，会在横轴上展开父布局。注意align-items:stretch不符合我们之前的属性描述，主要是因为它有两个限制。父容器必须有高度限制。子元素，不得指定高度、宽度或高度，具体取决于交叉轴的方向。比如之前的代码，我们根据这里的两个限制进行修改。align-items还有一个参数需要注意：baseline，按照主轴方向对齐，以第一个元素的内容为基准。让我们在块A中添加一个margin-top并查看效果。可以看到其他的属性是有影响的，但是设置了基线后，子元素还是可以按照内容对齐的。6）align-contentalign-content属性指定元素在横轴上的对齐方式，有点类似于align-items。一般移动端的UI布局往往以列表的形式向下无限延伸，所以align-content其实用处不大。但是当你需要制作单页效果的时候，比如活动图，可以使用align-content属性。align-content有六个可选属性：stretch：默认值，拉伸填充横轴，类似align-itemslimit。flex-start：对齐横轴的起点。flex-end：与横轴的末端对齐center：以横轴为中心。space-between：对齐横轴两端，子元素等间距。space-around：在横轴方向上，子元素和margin保持等距离。其实我们理解align-items，理解align-content也是非常容易的。话不多说，直接看效果图。4.Flex子容器属性在Flex布局的设置中，子元素有6个属性：flex-grow：子元素剩余空间的拉伸比例。flex-shrink：子元素超出空间，子元素拉伸比例反转。flex-basis：设置子元素的原始比例，不被拉伸。flex：前三个属性的一个集合属性。order：设置子元素，显示顺序。align-self：重写父容器设置的align-items属性，操纵子元素在横轴上的对齐效果。其实这些才是真正常用的。我们会一一细细分析，一如既往的风格。我们将以小程序中的真实效果截图为例。1.flex-grow属性flex-grow属性可以定义子元素在父元素中的伸缩比例，并根据比例为子元素分配不同的空间大小。请注意这里给出了两个例子。A例子中，A、B、C三个子元素的flex-grow分别设置为1、2、3，每个子元素的宽度设置为5rpx。设置flex-grow时，如果其中的子元素没有注意占据整个父容器，则子元素的空间会按照flex-grow设置的比例进行分配。flex-grow的值越小，占用空间越小。从这里的表现来看，flex-grow占用父容器的空间从小到大。在示例B中，我们将子元素的width属性设置为500rpx后，很明显一行是放不下3个子元素的。这时候flex-grow不会生效，会等比例排列。要使该属性生效，必须将flex-wrap设置为nowrap，即不允许换行，所有与比例相关的属性都需要nowrap支持。我希望每个人都熟悉这种举例的方式。下面的例子都将以这种形式表达参数设置。width，子元素的宽度。属性：1、2、3分别是不同的值。2、flex-shrink属性flex-shrink定义了子元素，容器外的空间按比例反转。由于flex-shrink是超出父容器的指定缩放比例，如果所有的子元素都没有超出父容器，这个属性就会失效，比如A例子中的效果。例子B中，设置子元素的宽度为500rpx，超出父容器的部分将按比例反向控制子元素的尺寸。这里的表现是当flex-shrink生效时，这个值越小，占用的空间越大。3、flex-basis属性flex-basis用于定义子元素不拉伸时的原始大小。前面介绍的两个属性，都是flex-grow和flex-shrink，在不同的情况下会改变子元素的缩放比例。如果我们要设置子元素，原来的大小是不会缩放的，你可以使用flex-basis。从例子中可以看出，flex-basis只有在scaling没有生效的时候才会生效。4、flex属性上面介绍的三个属性，很多属性的作用其实是互斥的，所以Flex布局还提供了一个组合属性flex，用于flex-grow、flex-shrink、flex这三个属性-basis缩写integration，默认值为01auto，最后两个属性为可选属性，即如果不写最后两个属性，相当于只设置flex-grow。为了更方便，flex属性还提供了两个快捷值：auto(11auto)和none(00auto)。效果很简单，就不多解释了。5.order属性order可以控制子元素在父布局中的排列顺序，值越小排列越高。使用order，我们不需要按照Flex布局中子容器的书写顺序，可以通过order进行修改。6、align-self属性在上一篇文章中，我们会使用父容器的align-items属性来改变cross轴上子元素的排列方向。而如果其中有子元素不满足这样的方向排列，也可以通过align-self属性对其进行修改。align-self默认值为auto，即继承父容器的align-items属性。如果没有父元素，相当于stretch。align-self与align-items类似，有六个选项。auto：监听父容器。flex-start：横轴起点对齐。flex-end：横轴末端对齐。center：交叉轴的上中心对齐方式。baseline：第一行文本的基线对齐方式。stretch：默认情况下，如果不设置高度，会占据整个高度。这里的例子中，Bitem使用align-self修改对齐方式为居中，呈现出来的效果是父容器在横轴上居中的效果，自己管理。5.总结至此，小程序中Flex布局的使用基本讲解清楚了。虽然前端布局有很多千奇百怪的技巧，但是使用这两篇??文章介绍的属性，已经可以布置出精美的UI效果了。快来开启你的小程序开发之旅吧！公众号后台回复“成长”，你会得到我准备的学习资料，也可以回复“进群”，一起学习进步；你也可以回复“问题”，问我问题。推荐阅读：小程序UI布局指南（一）程序员密码管理之道手动刷新MediaStore，保存的图片立即出现在伪代码、幽默与谷歌的艺术相册！漫画：App阻止Fiddler抓包！
