小程序布局篇
小程序布局篇
小程序布局标签介绍
布局方式
小程序布局篇
从初始小程序以来,有半年时间了,一直都是摸索着前进,项目已经成型,以后会一点点记录下,做小程序以来趟过得坑,和一些技术的实现。

小程序布局标签介绍
小程序的标签相对于HTML来说布局相对简单,不在需要div , 主要标签做到了很好的手机端兼容,也是小程序主要的布局需要:

快速上手
第一眼看到小程序的API,眼花缭乱,根本不知道从何下手,其实想要快速了解布局很容易,在这里我们把平时在HTML里面布局用的
标签想象成小程序里面的,这样想理解起来就会容易很多,除了标签的名字不一样,基本的样式配置都是和
大同小异的。
布局方式
在小程序里面只要了解三个代码,页面的布局和构建基本就够用了。
1.flex-direction:(主要用于父级的view样式)
这个代码有三个属性,

水平布局属性:

(1).row //这个属性的意思就是从左向右排列。(左对齐)
(2).row-reverse //这个属性的意思是从右向左对齐(右对齐)

垂直布局属性:

(1).column//主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)
(2).column-reverse://这个属性的正好与column相反

2.display:flex(主要用于子级的view样式,只有在父级用了flex-direction才会生效)

3.justify-content:(主要用于view的对齐方式)分为以下5种对齐方式

(1).flex-start(默认值):左对齐
(2).flex-end:右对齐
(3).center: 居中
(4).space-between:两端对齐,项目之间的间隔都相等。
(5).space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

以三个代码,基本能满足大部分,小程序布局的需求了,很简单,也很实用,这是我布局用的最多的方法。都是样式,只要记住了,使用起来并不是很难,如果有特殊复杂的布局方式,就要开动大家的小脑袋瓜好好的想一想了,当然小程序的 API也提供了其他的多重化布局方式,如有需要可以自行去了解。