写给 Android 开发的小程序 UI 布局指南(二)
承香墨影
最快捷的技术进阶之路
正文共: 2637字 10图
预计阅读时间: 7分钟
Hi,大家好,我是承香墨影!
最近在用小程序,验证一些方向,开发效率确实非常快。
从零开发小程序,阅读一遍文档一定是第一步,之后你就需要考虑,如何像开发一款 App 一样,编写一个漂亮的 UI 布局。
在小程序的开发中,会使用 Flex 进行布局,它可以帮助我们快速的在小程序中进行快速的 UI 布局。
Flex 利用 css 属性来进行布局,和 Android 布局一样,有一些属性是作用在父容器上的,而另外一些属性是作用在子元素上的。
在上一篇文章中,已经将 Flex 作用在父容器上的属性讲解清楚了,还不了解的可以戳这里????「小程序的 Flex 布局(一)」。
继续接上文的内容,来继续说说 Flex 中,作用在子元素上的属性。
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,并且每个子元素的宽度,设置为 5 rpx。
当设定了 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 例子中,设定子元素宽度 width 为 500rpx,超出父容器的部分,将成比例反向控制子元素的大小。
在这里的表现,就是 flex-shrink 生效的情况下,数值越小,占据的空间越大。
3. flex-basis 属性
flex-basis 用于定义子元素,在不伸缩情况下的原始尺寸。
前面介绍的两个属性,无论是 flex-grow 和 flex-shrink,都会在不同的情况下,改变子元素的缩放比例,如果我们想设定子元素,在不出发缩放的情况下,原始的大小,就可以使用 flex-basis。
从例子中可以看到,flex-basis 只在缩放不生效的时候,它才会生效。
4. flex 属性
前面介绍的三个属性,很多属性的效果其实是互斥的,所以 Flex 布局还提供了一个组合属性 flex,用于对 flex-grow 、 flex-shrink 、 flex-basis 三个属性的缩写整合,默认值为 0 1 auto
,而后两个属性是可选属性,也就是你不写后两个,等效于你只设置了 flex-grow。
为了更方便,flex 属性还提供了两个快捷值:auto
(1 1 auto) 和 none
(0 0 auto)。
效果很简单,就不多说明了。
5. order 属性
order 可以控制子元素,在父布局的排列顺序,数值越小,排列越靠前。
利用 order 我们可以不遵循 Flex 布局里,对子容器的编写顺序,都是可以通过 order 修改的。
6. align-self 属性
在上一篇文章中,我们将了可以通过父容器的 align-items 属性,改变交叉轴上,子元素在交叉轴上的排列方向。而如果其中有子元素对这样的方向排列不满意,还可以自己通过 align-self 属性进行修改。
align-self 的默认值是 auto
,表示继承父容器的 align-items 属性,如果没有父元素,等同于 stretch
。
align-self 和 align-items 类似,有六个可选项。
auto:听父容器的。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的上居中对齐。
baseline:已第一行文字的基准对齐。
stretch:默认,未设置高度的情况下,占满整个高度。
这里的例子中,B item 就使用 align-self 修改了对齐方式为 center
,呈现出来的效果,就是一个对父容器,在交叉轴上居中的效果,自己管理自己。
小结
到这里,关于小程序中 Flex 布局的使用,基本上就算是讲清楚了。虽然前端布局有很多奇淫技巧,但是利用这两篇文章中介绍的属性,已经可以排列出精美的 UI 效果。
快来开始你的小程序开发之旅吧!
你对 Flex 布局,还有什么疑问,可以在留言区讨论。
今天再特别推荐一个朋友的公众号,也是技术方向,我想很多朋友应该也知道他,还没关注的推荐关注一波。
「非著名程序员」,程序猿,攻城狮们的聚集地,这里分享的不仅有开发技术,还有编程经验,产品分析,以及互联网趋势分析与观察。带你提高自己技术的同时,还能让你时时刻刻走在技术和互联网的最前沿。
「非著名程序员」,可能是东半球最好的技术分享公众号。
公众号后台回复成长『成长』,将会得到我准备的学习资料,也能回复『加群』,一起学习进步;你还能回复『提问』,向我发起提问。
「联机圆桌」????一年 50 个优质问题,上桌联机学习。
推荐阅读:
听说喜欢留言、分享的人
运气都不会太差