微信小程序界面布局如何做?微信小程序的页面布局该如何处理?

9158APP 0

微信小程序界面布局如何做?微信小程序的页面布局该如何处理?

现在微信被各行各业的叔叔阿姨和我们的父母叔叔们使用。对于大公司和企业来说,微信是一个非常好的吸引客户的地方,因此很多公司和商家开始入驻微信。最近微信推出了小程序功能,功能强大。下面我们就来看看微信小程序的页面布局是如何处理的吧!

微信小程序使用flexbox容器,flexbox布局由flex容器和flex item组成。任何元素都可以指定为Flexbox 布局,设置为display:flex 或display:inline-flex 的元素称为Flex 容器。 Flex容器的子元素称为Flex Item,Flex Item使用Flex布局模型进行布局。可伸缩布局模型与传统布局的不同之处在于它是按照可伸缩流的方向进行布局的。

默认情况下,可伸缩容器由两个轴组成,主轴(main)和交叉轴(cross)。主轴的起始位置称为main start,结束位置称为main。

结尾。交叉轴的起始位置称为交叉起点,结束位置称为交叉终点。可扩展项目主轴上占据的空间称为主空间

axis,在交叉轴上占据的位置称为cross

轴,取决于设置。主轴可以是水平轴或垂直轴。无论使用哪个轴作为主轴,默认情况下,可缩放项目始终沿主轴排版,从主轴起始位置到主轴结束位置。在浏览器中使用flexbox时,需要添加各个浏览器的私有前缀,-webkit

,-moz,-ms,-o,去除微信小程序中的所有前缀。

可扩展容器支持的属性有:

1、显示

2、弯曲方向

3、柔性缠绕

4、弹性流

5.调整内容

6、对齐项目

7、对齐内容

8、订单

9、弹性增长

10、弹性基础

11、弯曲

12、自我对齐

主要介绍这几个属性

展示

该属性用于指定元素是否是可伸缩容器。语法是

显示:柔性|显示:内联柔性

wxml代码是:

1

2

3

4

5

6

7

8

9

wxss代码是。容器{

显示:柔性;

}

flex:用于生成块级可扩展容器。容器{

显示:内联柔性;

}

inline-flex:用于生成内联级可扩展容器,

inline-flex:用于产生行内级伸缩容器

弯曲方向

该属性用于指定主轴方向。语法是

弹性方向:行|行反转|专栏|列反转

1)行水平方向从左到右

第一步row水平方向从左向右

2) row-从右到左反转水平方向

第二步row-reverse水平方向从右向左

4)列可伸缩容器是垂直方向的,可伸缩项是从上到下键入的。

第四步column伸缩容器为垂直方向,伸缩项目的排版方式为从上到下

5)列反向可伸缩容器是垂直的,可伸缩项是从下到上。

第五步 column-reverse伸缩容器为垂直,伸缩项目为从下到上

以上就是今天微信小程序的页面布局如何处理的全部内容了!你明白吗?看完这篇文章,大家应该对微信小程序的页面布局如何处理有了清楚的认识了!希望魏伟峰的文章能给您带来一些帮助。