免费体验
首页   >    行业动态   >    微信小程序开发页面布局知识详解

微信小程序开发页面布局知识详解

发布时间:2018-10-16 09:51:28 来源:www.ktcx.com.cn 浏览量:271

      微信小程序开发人员都知道,页面布局是小程序构成要素之一。所以对于微信小程序开发页面布局的相关知识,一定要有所了解,今天,为大家分享微信小程序开发页面布局的几点知识,希望对微信小程序的上线有所帮助。

005EWUjlzy7hEa1drWn77&690.jpg


一、微信小程序页面布局方式

      微信小程序页面布局方式采用的是Flex布局,Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

      Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们可以是动态的或者不确定的大小的。

      Flex布局的主要特征是能够调整其子元素在不同的荧幕大小中能够用最适合的方法填充合适的空间。


二、基本概念

      采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

      容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。


三、Flex布局的特点

      Flex布局可以向左,向右,向下,向上的任意方向伸缩,并且在样式层可以调换和重排顺序,同时主轴和侧轴方便配置。


四、Flex布局在微信小程序中的使用

      伸缩容器设有display:flex或者display:block的元素就是一个flex container(伸缩容器),里面的子元素称为flex item(伸缩项目),flex container中子元素都是使用Flex布局排版。

      主轴和侧轴:Flex布局的伸缩容器可以使用任何方向进行布局。
      容器默认有两个轴:主轴(main axis)和侧轴(cross axis)。主轴的开始位置为主轴起点(main start),主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。


timgXA4MVDEG.jpg

  

      以上就是微信小程序开发页面布局的知识详解,希望对微信小程序开发中的你有所帮助。小程序的崛起,为企业带来了全新的发展机遇。小程序开发数量还在急剧增加,企业早了解微信小程序相关知识,就能早布局,早受益。


相关动态

Copyright ©2017 开拓创想 京ICP备13050461号-5
现在填写联系方式,享受一对一咨询服务
电话咨询
400-101-6178
全国服务热线